基於vue-cli3/cli4解決前端使用axios跨域問題

BenjaminC發表於2020-03-12
Vue前端iOS跨域

重要補充：

由於devServer.proxy是以開發環境為基礎，所以目前用devServer.proxy作為代理工具處理跨域還暫時只能解決開發環境下，如果是打包後的環境，還需與後端一起聯調處理，如果有更好的辦法，還請各位大佬不惜吝嗇指教~

背景

vue-cli4專案中使用axios請求後端介面時，瀏覽器出現跨域報錯

基於vue-cli3/cli4解決前端使用axios跨域問題

一、什麼是跨域

1.1 跨域

指的是瀏覽器不能執行其他網站的指令碼。它是由瀏覽器的同源策略造成的，是瀏覽器對javascript施加的安全限制。

1.2 同源策略

是指協議，域名，埠都要相同，其中有一個不同都會產生跨域，在請求資料時，瀏覽器會在控制檯中報一個異常，提示拒絕訪問。

1.3 為什麼出現跨域

後端程式碼在A伺服器上啟動，前端程式碼在B電腦上啟動，此時就會出現跨域。 伺服器和伺服器之間可以相互請求資料，是沒有跨域的概念（如果伺服器沒有設定禁止跨域的許可權問題）

二、配置axios代理解決跨域（純前端解決跨域問題）

解決跨域問題思路：

我們可以配置一個代理的伺服器可以請求另一個伺服器中的資料，然後把請求出來的資料返回到我們的代理伺服器中，代理伺服器再返回資料給我們的客戶端，這樣我們就可以實現跨域訪問資料。

2.1 配置baseUrl

// main.js

import axios from 'axios'
Vue.prototype.$axios = axiosd
axios.defaults.baseURL = '/api'
複製程式碼

說明：axios.defaults.baseURL = '/api'作用是每次傳送請求都會帶一個/api的字首

2.2 配置proxy

官方配置proxy文件說明

// vue.config.js

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: '//111.222.333.444:8888',// 你要請求的後端介面ip+port
                changeOrigin: true,// 允許跨域，在本地會建立一個虛擬服務端，然後傳送請求的資料，並同時接收請求的資料，這樣服務端和服務端進行資料的互動就不會有跨域問題
                ws: true,// 開啟webSocket
                pathRewrite: {
                    '^/api': '',// 替換成target中的地址
                }
            }
        }
    }
}
複製程式碼

2.3 元件中傳送請求

// 原介面url：http://111.222.333.444:8888/test
// 原請求寫法：this.$axios.get('http://111.222.333.444:8888/test')

// 配置proxy代理後請求寫法
this.$axios.get('/test')
複製程式碼

原理說明：我們請求/test，就相當於請求了：localhost:8080/api/test，然後配置的proxy攔截了/api，並把/api以及前面的所有替換成了target的內容，因此實際請求的url是http://111.222.333.444:8888/test

2.4 重啟vue專案，已經解決跨域問題

注：在瀏覽器的除錯工具中，proxy代理後的請求url會變更顯示為http://localhost:8080/api/test，且不會顯示代理前的請求連結

相關文章