淺析Vue跨域問題的原因與解決方法

隨著前端技術的發展，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。

npm install 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中文網其他相關文章！