調(diào)用后端接口訪問后臺數(shù)據(jù)，但是因為請求url的協(xié)議、域名、端口三者之間任意一個與當前頁面url不同產(chǎn)生了跨域，我們vue項目運行的地址一般就是localhost 8080端口，而且后端也沒有配置允許跨域（后端如果配置跨域通常是cors），所以前端就要配置跨域，Vue跨域在vue.config.js文件里配置。
代理跨域的解決方法
方法一：
后端大哥來解決，讓前端存在跨域問題也可以正常訪問接口
方法二:配置代理跨域
在config.js文件中的devServer屬性下面的proxy屬性
devServer: {
host: 'localhost',//本地地址
port: '8080',//端口號
hot: true,//熱更新自動刷新
open: true,//自動打開
overlay: { //當出現(xiàn)編譯錯誤或警告時，在瀏覽器中顯示全屏覆蓋。只顯示錯誤信息不提示警告情況限制是
warning: false,
error: true
},
proxy: {
"/api": {
target: 'http://xxxxxxxxxxx.com',//代理地址 凡是使用/api
changeOrigin: true,//允許跨域請求
secure: false,
pathRewrite: { //重寫路徑 替換請求地址中的指定路徑
['^/api']: '/' //將請求地址中的api替換為空
}
}
}
}/api的理解
‘/api’：是指遇到這個字符開頭的話，在這個字符前面加上target里面的ip或者域名。
舉例：
①登錄接口：http://asdfgh:5000/login
…中間省略了配置過程…
②npm run serve:Local: http://localhost:8080/
③點擊后發(fā)送的登錄請求：http://localhost:8080/api/login
④/api 的作用就是將/api前的localhost：8080變成target的內(nèi)容http://asdfgh:5000/
⑤完整的路徑變成了http://asdfgh:5000/api/login
⑥實際接口當中沒有這個api，所以pathwrite重寫就解決這個問題的。
⑦pathwrite識別到api開頭就會把/api重寫成空，那就是不存在這個/apil了，完整的路徑又變成：http://asdfgh:5000/login文章來源：http://www.zghlxwxcb.cn/news/detail-617345.html
詳細可以查看webpack的官方地址:DevServer | webpack文章來源地址http://www.zghlxwxcb.cn/news/detail-617345.html
到了這里，關(guān)于vue2的vue.config.js中簡單配置代理跨域的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
