隨著前端技術的發展，Vue已經成為了許多開發者非常鍾愛的一款JavaScript框架，不僅因為其易用性、高效性、靈活性，還因為其配套的生態系統非常豐富。但是，同時，隨著前端專案規模越來越大，Vue專案的部署問題也逐漸顯現出來，其中最常見的問題就是跨域問題。本文將介紹Vue跨域問題的原因、解決方法以及相關實務。
一、為什麼會有Vue跨域問題？
Vue專案中存在跨域問題的原因是因為瀏覽器的同源策略，也就是說前端無法直接發起跨域請求。同源策略是一個基礎的安全策略，但這也會為Vue開發者在部署時帶來一定的麻煩。一般來說，瀏覽器會根據請求來判斷是否同源，判斷的方式是透過判斷兩個URL的協定（http or https）、網域名稱和連接埠是否相同來進行的。
Vue專案中跨域問題的典型範例就是，前端專案透過AJAX請求後端API時，如果後端API的URL與目前Vue專案的URL不在同一個網域下，則會出現跨域問題。
二、如何解決Vue跨域問題？
既然現在的問題已經很明確，那麼我們再來找到解決這個問題的方法。下面，我們將介紹三種常見的解決跨域問題的方法，也是應用最廣泛的三種方法。
1、服務端設定CORS
我們可以透過服務端設定CORS來解決跨域問題。 CORS，即跨來源資源共享，是一種服務端解決跨域問題的方案。服務端透過在HTTP回應中設定Access-Control-Allow-Origin頭，來告訴瀏覽器允許哪些網域的請求。當瀏覽器發現請求的網域在存取允許的範圍內時，就可以成功返回請求結果。
具體實作方法如下：
在後端的回應頭設定Access-Control-Allow-Origin屬性，允許前端的存取：
Access-Control-Allow-Origin: *
登入後複製
上面的程式碼中，*表示允許所有的請求來源。
2、利用webpack-dev-server的proxyTable屬性
在Vue中，我們可以透過webpack-dev-server配置proxyTable來解決開發時的跨域問題。 proxyTable可以把開發者本地的請求代理到伺服器上，有效解決了跨域問題。
proxyTable設定的方式如下：
dev: {
proxyTable: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}登入後複製
上面的程式碼中，/api表示需要代理程式的請求，target表示需要代理到的後端伺服器位址，changeOrigin: true表示是否改變請求的來源，pathRewrite用來重寫請求路徑。
3、使用JSONP方式解決跨域問題
JSONP是一種跨域解決方案，它是在網頁中動態添加一個script標籤，並透過這個script標籤來存取跨域接口，取得對應結果，前端將請求結果封裝在一個回呼函數中傳回，以此實現跨域請求。 JSONP的實作方式是後端在傳回一段JavaScript程式碼，這段程式碼裡會呼叫前端定義好的一個回呼函數，並將資料作為參數傳給這個回呼函數，前端透過監聽回呼函數中的參數來取得後端數據。
以下是JSONP的實作方式：
後端程式碼：
app.get('/jsonp', (req, res) => {
const { data } = req.query;
const callback = req.query.callback;
const result = callback + '(' + JSON.stringify({ code: 0, data: data }) + ')';
res.end(result);
});登入後複製
前端程式碼：
function jsonp(url, callback) {
const script = document.createElement('script');
script.src = `${url}?callback=${callback}`;
document.body.append(script);
}
jsonp('http://localhost:3000/jsonp', function (res) {
console.log(res);
});登入後複製
三、跨領域實作
#實務1：利用webpack-dev-server設定proxyTable解決跨網域問題
我們先前端Vue專案發起請求到後端API為例，來講述如何透過webpack-dev-server的proxyTable屬性來解決跨域問題。
1.安裝webpack-dev-server和http-proxy-middleware
在專案中安裝webpack-dev-server和http-proxy-middleware。
npm install --save-dev webpack-dev-server http-proxy-middleware
登入後複製
2.在webpack設定檔中引入http-proxy-middleware
const proxyMiddleware = require('http-proxy-middleware')登入後複製
3.在webpack-dev-server配置中使用proxyTable
proxyTable: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}登入後複製
上面的程式碼中，我們配置了一個/api的代理，將請求代理到本地3000連接埠。
4.使用代理請求API
在Vue專案的程式碼中，我們只需要使用/api作為URL前綴，這樣就能成功將請求代理到本地3000連接埠。
axios.get('/api/users')登入後複製
實作2：利用CORS從後端解決跨域問題
我們可以透過後端設定CORS來解決跨域問題。這裡我們以node.js的express框架為例來介紹。
1.安裝express
在專案中安裝express。
2.在server.js或app.js檔案中設定CORS
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
next();
});登入後複製
上面的程式碼設定了CORS，允許所有來源的請求都可以成功回傳。
3.在後端API中，新增先前的CORS設定
app.get('/users', (req, res) => {
const data = [
{ id: 1, name: 'Jack' },
{ id: 2, name: 'Lily' }
];
res.setHeader('Access-Control-Allow-Origin', '*');
res.json(data);
});登入後複製
上面的程式碼中，我們在服務端回應頭中加入Access-Control-Allow-Origin屬性，用來告訴瀏覽器允許哪些網域的請求。
4.在Vue專案中發起請求
在Vue專案中的Ajax請求，我們只需要按照正常的方式來發起請求。
axios.get('/users').then(resp => {
console.log(resp.data);
});登入後複製
結論
Vue的跨域問題是一個較為常見的問題，但是只需要掌握了解決方法，就可以輕鬆解決。在跨域問題上，我們可以透過服務端設定CORS，利用webpack-dev-server的proxyTable屬性或是使用JSONP方式來解決。本文透過實踐的方式介紹了這三種方法的具體使用，希望讀者在實踐中能收穫更多。
以上是淺析Vue跨域問題的原因與解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
