在Vue專案開發過程中解決跨域問題

一、是什麼

問題描述：

在本地開發過程中，呼叫後端程式設計師提供的介面獲取資料，希望將獲取的資料渲染到頁面中，但是瀏覽器報錯：

// 控制檯報錯資訊
Access to XMLHttpRequest at 'http://x.x.x.x/data/getdata' 
from origin 'http://localhost:8080' has been blocked by 
CORS policy: The 'Access-Control-Allow-Origin' header 
has a value 'http://x.x.x.x:8080' 
that is not equal to the supplied origin.

檢視Network中的內容時發現XHR中該請求的狀態Status為200，但是頁面中資料不顯示。

這種情況是由瀏覽器的同源策略導致的跨域問題。

二、為什麼

跨域問題的出現是因為瀏覽器存在同源策略問題，所謂同源:即兩個頁面具有相同的協定（protocol：http、https），主機（host）和埠（port），它是瀏覽器最核心也是最基本的功能，如果沒有同源策略，瀏覽器將會十分危險，隨時都可能受到攻擊。當我們請求一個介面獲取資料的時候，出現如：「Access-Control-Allow-Origin」 等報錯資訊即說明該請求跨域。

三、怎麼辦

1.在vue專案根目錄下找到vue.config.js檔案（如果沒有該檔案可自己建立），在proxy中設定跨域。

更多vue.config.js相關設定可存取Vue CLI 檢視設定參考

其中也有devServer和devServer.proxy設定的詳細說明

//vue.config.js

module.exports = {
  devServer: {
    proxy: {
      //設定跨域
      '/api': {
        target: 'http://x.x.x.x:x/', //這裡填寫專案真實的後臺介面地址
        changOrigin: true, //設定允許跨域
        pathRewrite: {//這個重寫不可省略！因為我們真正請求的地址並不含 /api
          '^/api': ''
            /* 當我們在瀏覽器中看到請求的地址為：http://localhost:8080/api/data/getdata 時
            因為重寫了 /api ，所以實際上存取的地址是：http://x.x.x.x:x/data/getdata，
            */
        }
      }
    }
  }
}

在vue專案中設定proxy解決跨域問題的原理是：將域名傳送給原生的伺服器（啟動vue專案的服務，localhost:8080），再由原生的伺服器去請求真正的伺服器。

2.在vue專案src目錄下找到main.js檔案，在建立axios範例的時候將baseURL設定為 /api ，這時候我們的跨域問題便已解決。

//main.js

import axios from 'axios'
Vue.prototype.$axios = axios
//設定請求的根路徑
axios.defaults.baseURL = '/api'

3.重新啟動專案即可獲取到資料並在頁面中顯示了，此時我們在瀏覽器檢視Network中的請求資訊會看到Request URL是：http://localhost:8080/api/data/getdata，多了個 /api，但並不影響我們請求資料。