vue2中vue.config.js簡單配置代理跨域的方法
前言
調(diào)用后端接口訪問后臺數(shù)據(jù)，但是因?yàn)檎埱髐rl的協(xié)議、域名、端口三者之間任意一個(gè)與當(dāng)前頁面url不同產(chǎn)生了跨域，我們vue項(xiàng)目運(yùn)行的地址一般就是localhost 8080端口，而且后端也沒有配置允許跨域（后端如果配置跨域通常是cors），所以前端就要配置跨域，Vue跨域在vue.config.js文件里配置。
代理跨域的解決方法
方法一：
后端大哥來解決，讓前端存在跨域問題也可以正常訪問接口
方法二:配置代理跨域
在config.js文件中的devServer屬性下面的proxy屬性
devServer: {
host: 'localhost',//本地地址
port: '8080',//端口號
hot: true,//熱更新自動(dòng)刷新
open: true,//自動(dòng)打開
overlay: { //當(dāng)出現(xiàn)編譯錯(cuò)誤或警告時(shí)，在瀏覽器中顯示全屏覆蓋。只顯示錯(cuò)誤信息不提示警告情況限制是
warning: false,
error: true
},
proxy: {
"/api": {
target: 'http://xxxxxxxxxxx.com',//代理地址 凡是使用/api
changeOrigin: true,//允許跨域請求
secure: false,
pathRewrite: { //重寫路徑 替換請求地址中的指定路徑
['^/api']: '/' //將請求地址中的api替換為空
}
}
}
}/api的理解
‘/api’：是指遇到這個(gè)字符開頭的話，在這個(gè)字符前面加上target里面的ip或者域名。
舉例：
①登錄接口：http://asdfgh:5000/login
…中間省略了配置過程…
②npm run serve:Local: http://localhost:8080/
③點(diǎn)擊后發(fā)送的登錄請求：http://localhost:8080/api/login
④/api 的作用就是將/api前的localhost：8080變成target的內(nèi)容http://asdfgh:5000/
⑤完整的路徑變成了http://asdfgh:5000/api/login
⑥實(shí)際接口當(dāng)中沒有這個(gè)api，所以pathwrite重寫就解決這個(gè)問題的。
⑦pathwrite識別到api開頭就會(huì)把/api重寫成空，那就是不存在這個(gè)/apil了，完整的路徑又變成：http://asdfgh:5000/login
詳細(xì)可以查看webpack的官方地址:DevServer | webpack
總結(jié)
到此這篇關(guān)于vue2中vue.config.js簡單配置代理跨域的文章就介紹到這了,更多相關(guān)vue.config.js配置代理跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue監(jiān)聽滾動(dòng)條頁面滾動(dòng)動(dòng)畫示例代碼
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,與其它大型框架不同的是,Vue?被設(shè)計(jì)為可以自底向上逐層應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于vue監(jiān)聽滾動(dòng)條頁面滾動(dòng)動(dòng)畫的相關(guān)資料,需要的朋友可以參考下2023-06-06
小編給大家整理了關(guān)于vue移動(dòng)端日期選擇組件的知識點(diǎn)總結(jié)，希望能夠給讀者帶來幫助，一起學(xué)習(xí)參考下。2018-02-02
vite+tsc打包報(bào)TS類型錯(cuò)誤的問題及解決過程
文章主要介紹了在使用vite+tsc打包Vue3項(xiàng)目時(shí),可能會(huì)遇到TS類型錯(cuò)誤的問題,通過配置tsconfig.json文件,可以解決這個(gè)問題,設(shè)置"checkTypes":?false可以關(guān)閉依賴包的類型檢查,從而避免不必要的錯(cuò)誤提示2026-03-03
Vue實(shí)戰(zhàn)記錄之登陸頁面的實(shí)現(xiàn)
最近學(xué)習(xí)過程中常碰到讓用戶登錄注冊這種,這篇文章主要給大家介紹了關(guān)于Vue實(shí)戰(zhàn)記錄之登陸頁面實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2021-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)日歷組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue 實(shí)現(xiàn) rem 布局或vw 布局的方法
這篇文章主要介紹了vue 實(shí)現(xiàn) rem 布局的 或者 vw 布局的方法，本文給提供多種方法,需要的朋友可以參考下2019-11-11
vue3中遇到reactive響應(yīng)式失效的問題記錄
這篇文章主要介紹了vue3中遇到reactive響應(yīng)式失效的問題記錄，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vue腳手架及vue-router基本使用，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04
vxe-table?實(shí)現(xiàn)?excel?選擇一個(gè)單元格拖拽自動(dòng)復(fù)制新的單元格(示例代碼)
vxe-table是一款強(qiáng)大的表格組件,支持Excel風(fēng)格的操作,通過鼠標(biāo)右下角的擴(kuò)展按鈕,用戶可以拖拽選擇單元格并自動(dòng)復(fù)制內(nèi)容到擴(kuò)展區(qū)域的所有單元格中,本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-01-01
vue項(xiàng)目中定義全局變量、函數(shù)的幾種方法
這篇文章主要介紹了vue項(xiàng)目中定義全局變量、函數(shù)的幾種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11