關(guān)于axios的proxy代理配置解析
axios的proxy代理配置解析
proxy實(shí)際上是一種前端開發(fā)中方便開發(fā)用的東西，它在本地可以跨域訪問其他的網(wǎng)站，但是當(dāng)頁面打包之后，proxy就會(huì)失效
我是在vue.config.js中設(shè)置proxy的，代碼如下
proxy: {
//匹配到的路徑
"/api": {
target: "XXXXXXXXX", //目標(biāo)主機(jī)地址
changeOrigin: true,//是否啟動(dòng)代理
pathRewrite: { //重寫路徑
"^/api": '' //如果遇到前綴為'/api'的url，將它重寫為''
}
}
}舉個(gè)例子
proxy的target設(shè)置成http://www.web-jshtml.cn/aaa
如果你想訪問http://192.168.1.114:8080/api/，這時(shí)候，你碰到了/api，你需要將/api前邊的域名轉(zhuǎn)換為target的地址，即
- 將
http://192.168.1.114:8080轉(zhuǎn)換為http://www.web-jshtml.cn/aaa
即是http://www.web-jshtml.cn/aaa/api/這個(gè)地址，但是因?yàn)閜roxy的pathRewrite里需要將'/api'轉(zhuǎn)換為空字符串，所以最終的訪問地址是
http://www.web-jshtml.cn/aaa
直接上文檔，文檔里有詳細(xì)資料
axios proxy代理不成功
失敗嘗試
1、createProxyMiddleware進(jìn)行setupProxy配置，但是由于之前通過craco注入webpack進(jìn)行l(wèi)ess配置，可能底層加了別的配置，導(dǎo)致setupProxy有沖突。
2、于是嘗試通過craco進(jìn)行webpack配置注入，跨域配置仍然無效。
解決辦法
通過axios發(fā)請(qǐng)求到代理服務(wù)器（本機(jī)），再通過本機(jī)發(fā)送到package.json中設(shè)置的proxy遠(yuǎn)程服務(wù)器上。等于這份代碼是瀏覽器用，js控制，通過本機(jī)發(fā)請(qǐng)求
import axios from 'axios';
const axiosInstance = axios.create({
? ? baseURL:'/', // 創(chuàng)建本機(jī)代理服務(wù)器， 之后通過本機(jī)發(fā)送請(qǐng)求
? ? timeout: 1000*60*12 // 設(shè)置超時(shí)時(shí)間
})// package.json proxy: http://xxxxxxx //遠(yuǎn)程服務(wù)器地址
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在微信小程序中，可以使用全局配置和使用開發(fā)、體驗(yàn)、生產(chǎn)環(huán)境的地址，這篇文章主要介紹了Vue微信和uniapp配置環(huán)境地址,需要的朋友可以參考下2023-07-07
在vue使用clipboard.js進(jìn)行一鍵復(fù)制文本的實(shí)現(xiàn)示例
這篇文章主要介紹了在vue使用clipboard.js進(jìn)行一鍵復(fù)制文本的實(shí)現(xiàn)示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了nuxt 頁面路由配置,主頁輪播組件開發(fā)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue.js template模板的使用,用到了4個(gè)組件,分別是header.vue,goods.vue,ratings.vue,seller.vue,感興趣的朋友跟隨腳本之家小編一起看看實(shí)現(xiàn)代碼2018-08-08
Vue自定義組件實(shí)現(xiàn)v-model雙向數(shù)據(jù)綁定的方法
這篇文章主要介紹了Vue自定義組件實(shí)現(xiàn)v-model雙向數(shù)據(jù)綁定的方法,文中通過代碼示例講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-11-11
Vue+ElementUI容器無法鋪滿網(wǎng)頁的問題解決
這篇文章主要介紹了Vue+ElementUI容器無法鋪滿網(wǎng)頁的問題解決,文章通過圖文結(jié)合的方式給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-08-08
Vue中foreach數(shù)組與js中遍歷數(shù)組的寫法說明
這篇文章主要介紹了Vue中foreach數(shù)組與js中遍歷數(shù)組的寫法說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-06-06
這篇文章主要介紹了Vue項(xiàng)目如何開啟gzip的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-06-06
Vue3 的這些指令覆蓋了渲染、條件、循環(huán)、事件、屬性、雙向綁定、插槽等核心場(chǎng)景,是前端工程師高效開發(fā)的 “利器”,掌握它們的用法與場(chǎng)景,能讓你在 Vue 開發(fā)中事半功倍,寫出更簡潔、更易維護(hù)的代碼,本文給大家介紹Vue3中的常用指令,感興趣的朋友一起看看吧2025-11-11
這篇文章主要介紹了Vue混入使用和選項(xiàng)合并，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2021-10-10