【前端】在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），主機（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，但並不影響我們請求數據。