關(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)文章
這篇文章主要介紹了vue之bus總線簡單使用講解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了淺談Vue知識(shí)系列-axios，本文章內(nèi)容詳細(xì)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助，需要的朋友可以參考下<BR>2023-01-01
Vue.js項(xiàng)目在apache服務(wù)器部署問題解決
本文主要介紹了Vue.js項(xiàng)目在apache服務(wù)器部署問題解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
解決Vue-Router升級(jí)導(dǎo)致的Uncaught (in promise)問題
這篇文章主要介紹了解決Vue-Router升級(jí)導(dǎo)致的Uncaught (in promise)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue項(xiàng)目開啟Gzip壓縮和性能優(yōu)化操作
這篇文章主要介紹了vue項(xiàng)目開啟Gzip壓縮和性能優(yōu)化操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Element通過v-for循環(huán)渲染的form表單校驗(yàn)的實(shí)現(xiàn)
日常業(yè)務(wù)開發(fā)中，form表單校驗(yàn)是一個(gè)很常見的問題，本文主要介紹了Element通過v-for循環(huán)渲染的form表單校驗(yàn)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要介紹了vue中關(guān)于trigger的用法說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue后端傳文件流轉(zhuǎn)化成blob對(duì)象,前端點(diǎn)擊下載返回undefined問題
這篇文章主要介紹了vue后端傳文件流轉(zhuǎn)化成blob對(duì)象,前端點(diǎn)擊下載返回undefined問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue.config.js?是一個(gè)可選的配置文件，如果項(xiàng)目的?(和?package.json?同級(jí)的)?根目錄中存在這個(gè)文件，那么它會(huì)被?@vue/cli-service?自動(dòng)加載，本文重點(diǎn)介紹VUE前端vue.config.js簡介，感興趣的朋友跟隨小編一起看看吧2023-01-01
vue router學(xué)習(xí)之動(dòng)態(tài)路由和嵌套路由詳解
本篇文章主要介紹了vue router 動(dòng)態(tài)路由和嵌套路由，詳細(xì)的介紹了動(dòng)態(tài)路由和嵌套路由的使用方法，有興趣的可以了解一下2017-09-09