關(guān)于axios的proxy代理配置解析
axios的proxy代理配置解析
proxy實際上是一種前端開發(fā)中方便開發(fā)用的東西，它在本地可以跨域訪問其他的網(wǎng)站，但是當(dāng)頁面打包之后，proxy就會失效
我是在vue.config.js中設(shè)置proxy的，代碼如下
proxy: {
//匹配到的路徑
"/api": {
target: "XXXXXXXXX", //目標(biāo)主機(jī)地址
changeOrigin: true,//是否啟動代理
pathRewrite: { //重寫路徑
"^/api": '' //如果遇到前綴為'/api'的url，將它重寫為''
}
}
}舉個例子
proxy的target設(shè)置成http://www.web-jshtml.cn/aaa
如果你想訪問http://192.168.1.114:8080/api/，這時候，你碰到了/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/這個地址，但是因為proxy的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ā)請求到代理服務(wù)器（本機(jī)），再通過本機(jī)發(fā)送到package.json中設(shè)置的proxy遠(yuǎn)程服務(wù)器上。等于這份代碼是瀏覽器用，js控制，通過本機(jī)發(fā)請求
import axios from 'axios';
const axiosInstance = axios.create({
? ? baseURL:'/', // 創(chuàng)建本機(jī)代理服務(wù)器， 之后通過本機(jī)發(fā)送請求
? ? timeout: 1000*60*12 // 設(shè)置超時時間
})// package.json proxy: http://xxxxxxx //遠(yuǎn)程服務(wù)器地址
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue之bus總線簡單使用講解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了淺談Vue知識系列-axios，本文章內(nèi)容詳細(xì)，具有很好的參考價值，希望對大家有所幫助，需要的朋友可以參考下<BR>2023-01-01
本文主要介紹了Vue.js項目在apache服務(wù)器部署問題解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
解決Vue-Router升級導(dǎo)致的Uncaught (in promise)問題
這篇文章主要介紹了解決Vue-Router升級導(dǎo)致的Uncaught (in promise)問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue項目開啟Gzip壓縮和性能優(yōu)化操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Element通過v-for循環(huán)渲染的form表單校驗的實現(xiàn)
日常業(yè)務(wù)開發(fā)中，form表單校驗是一個很常見的問題，本文主要介紹了Element通過v-for循環(huán)渲染的form表單校驗的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要介紹了vue中關(guān)于trigger的用法說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue后端傳文件流轉(zhuǎn)化成blob對象,前端點擊下載返回undefined問題
這篇文章主要介紹了vue后端傳文件流轉(zhuǎn)化成blob對象,前端點擊下載返回undefined問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vue.config.js?是一個可選的配置文件，如果項目的?(和?package.json?同級的)?根目錄中存在這個文件，那么它會被?@vue/cli-service?自動加載，本文重點介紹VUE前端vue.config.js簡介，感興趣的朋友跟隨小編一起看看吧2023-01-01
vue router學(xué)習(xí)之動態(tài)路由和嵌套路由詳解
本篇文章主要介紹了vue router 動態(tài)路由和嵌套路由，詳細(xì)的介紹了動態(tài)路由和嵌套路由的使用方法，有興趣的可以了解一下2017-09-09