本篇參考如下文章:
vue3.0 vue.config.js 配置跨域
vue-cli3設(shè)置代理跨域詳解
vue-cli3配置與跨域處理
VUE前端項目配置代理解決跨域問題
用 Vue+ElementUI 搭建后臺管理極簡模板
什么是跨域
為什么會產(chǎn)生跨域
在開發(fā)階段,我們的本機ip(假設(shè)為192.168.1.109:8080),但是后臺同學(xué)的接口地址可能為192.168.1.202:8085,當(dāng)我們用axios發(fā)起請求的時候,因為客戶端和服務(wù)端的IP地址網(wǎng)段不同,就可能會發(fā)生上圖的報錯,這就是因為跨域造成的,顧名思義,跨域名請求
如何解決跨域
從這篇文章 VUE前端項目配置代理解決跨域問題里講到了3中解決辦法,分別是:
1.Chrome擴展插件
這個需要梯子,不多贅述
2.服務(wù)端解決:
這個需要找后臺同學(xué)協(xié)商解決,好在的是,后臺使用的開源框架,第三方庫等,都對跨域做了處理,能保證客戶端在哪里調(diào)用,都不會出現(xiàn)跨域問題,但是萬一呢,萬一后臺沒有對跨域處理???
3.前端項目配置本地代理
經(jīng)過測試,此種解決方法實用性很強,不需要服務(wù)端有沒有配置跨域解決辦法,也不需要瀏覽器插件支持,都可以訪問外部接口
通過前端項目自己配置的代理,能達到,將原本的
本地 ----> 遠端
的流程,轉(zhuǎn)換為
本地 ----> 本地代理 ----> 遠端
其中本地代理->遠端的過程,由框架來完成,并保證能正常請求得到數(shù)據(jù),這樣,當(dāng)我們發(fā)起請求時候,就是一個本地--->本地代理的請求,這是一個本地請求本地的請求過程,在同一個ip(域名)下進行,因此,不再存在跨域的問題
這里引用用 Vue+ElementUI 搭建后臺管理極簡模板的一張圖,能更直觀的理解這一過程:
對于vue-cli 3.x建立的項目,我們需要如下配置vue.config.js文件:
module.exports = {
publicPath: "/",
outputDir: "distination",//npm run build 輸出目錄
assetsDir: "assets",//靜態(tài)資源目錄(js,css,img,fonts)
lintOnSave: false,//是否開啟EsLint保存時檢測,有效值: true false error
devServer: {
open: true,//是否自動打開瀏覽器
host: 'localhost',
port: '8081',
https: false,
hotOnly: false,//模塊是否熱更新,具體語義不詳
//跨域
proxy: {
//配置跨域
'/api': {
target: "http://test.mock.com/",//后臺接口baseUrl
ws: true,//是否跨域
changeOrigin: true,//配置跨域
pathRewrite: {
'^/api': ''
}
}
}
}
}
這樣,我們使用axios發(fā)起請求時候,假設(shè)我們的接口地址為'aaa/bbb',我們需要在發(fā)起請求時候講地址寫成api/aaa/bbb,只有這樣,才會被我們配置的paoxy里面的/api代理到
有的同學(xué)可能會產(chǎn)生疑問: 你這不是修改了接口地址么,還能請求到么???
先別急,我們上面的配置里面還有pathRewrite的配置,它的功能就是,通過通配符,把地址里面的"/api"替換為冒號后面的內(nèi)容,比如我們配置的就是一對單引號,這就把接口地址改回去了,
總結(jié)
造成跨域的原因,就是Request URL中的host和我們 請求頭中的Origin字段不一致,也就是常說的非同源,
如圖,可以看到,Request URL中的host 和 請求頭中的 Origin字段已經(jīng)一致了，這就是為什么配置代理可以解決跨域的問題,
造成跨域是因為Request URL 的host與我們的Origin字段不一致，也就是常說的，非同源，通過配置代理，我的請求變成了從
192.168.1.109:8080(即:我本地的ip)向192.168.1.109:8080(還是我本地的ip)請求數(shù)據(jù)，則解決了非同源的問題
簡單的說(人話模式,哈哈原作者這句太精辟了):
人話：代理服務(wù)器代替我們請求了服務(wù)器的數(shù)據(jù)返回給了我本機，我本機向我本機請求"代理"替我拿到的數(shù)據(jù)，因此我不再需要考慮跨域了
