? ? ? ?如果是不考慮跨域問(wèn)題，那么請(qǐng)求后臺(tái)數(shù)據(jù)使用的就是該路徑。但是根據(jù)同源策略，3000端口（前端頁(yè)面端口）無(wú)法訪問(wèn)5000端口（后臺(tái)數(shù)據(jù)端口），此時(shí)就需要使用proxy代理配置了。?

/** * 獲取所有的用戶信息 */ getUserData = () => {axios.get('http://localhost:5000/users').then(res => { console.log(res.data) },err => { console.log(err) })}

? ? ?在src文件夾中新建文件setupProxy.js添加配置，項(xiàng)目進(jìn)行啟動(dòng)的時(shí)候會(huì)自動(dòng)遍歷到這個(gè)文件并加入webpack中。

const proxy = require('http-proxy-middleware')module.exports = function(app){app.use(proxy('/api',{ //遇見(jiàn)/api前綴的請(qǐng)求，就會(huì)觸發(fā)該代理配置target:'http://localhost:5000', //請(qǐng)求轉(zhuǎn)發(fā)給誰(shuí)// 如果沒(méi)有手動(dòng)設(shè)置為true，該屬性默認(rèn)為false// 在本文中false狀態(tài)下服務(wù)端獲取到的Host請(qǐng)求來(lái)自于3000端口// true狀態(tài)下Host請(qǐng)求來(lái)自于5000端口// 成功欺騙到了服務(wù)器 :)changeOrigin:true, //控制服務(wù)器收到的請(qǐng)求頭中Host的值// 在請(qǐng)求路徑中加上了/api的路徑觸發(fā)代理 // 但是在后端訪問(wèn)路徑中沒(méi)有/api/xxx的說(shuō)法// 所以需要在請(qǐng)求觸發(fā)后將/api的路徑刪掉即改為空字符串pathRewrite:{'^/api1':''} //重寫(xiě)請(qǐng)求路徑})，// 在use中可以設(shè)置多個(gè)proxy代理proxy('/api2',{ xxxx }),proxy('/api3',{ xxxx })) }

?分析：

首先還是簡(jiǎn)要介紹下代理配置的實(shí)現(xiàn)原理?

? ? ?如果沒(méi)有代理，客戶端可以向服務(wù)端發(fā)起請(qǐng)求，但是根據(jù)同源策略無(wú)法接收到返回的數(shù)據(jù)，最后導(dǎo)致數(shù)據(jù)請(qǐng)求失敗。

? ? ?其實(shí)代理可以理解為3000端口的中間商，注意，和客戶端一樣也是開(kāi)在3000端口。該端口既開(kāi)著一個(gè)腳手架的終端提供前臺(tái)編寫(xiě)，同時(shí)也開(kāi)著一個(gè)非常微小的服務(wù)器。因此客戶端直接將請(qǐng)求發(fā)送給代理，代理直接將請(qǐng)求轉(zhuǎn)發(fā)給服務(wù)端（服務(wù)器之間數(shù)據(jù)的獲取不會(huì)受到跨域影響，產(chǎn)生跨域問(wèn)題的本質(zhì)是ajax引擎攔截了響應(yīng)），因此服務(wù)端直接將數(shù)據(jù)返回給了代理。最后端口同為3000的代理可以成功將數(shù)據(jù)返回給客戶端。

接下來(lái)討論具體的配置以及路徑設(shè)置方法?

? ? 在添加了代理后，所有向3000端口中發(fā)送的【本地沒(méi)有的資源】請(qǐng)求都會(huì)轉(zhuǎn)發(fā)給5000端口，因此我們可以將請(qǐng)求路徑做一個(gè)修改，改為’http://localhost:3000/api/users‘。需要注意這句話里的黑體內(nèi)容，如果請(qǐng)求路徑是’http://localhost:3000/api/index.html‘，返回的結(jié)果就會(huì)是public目錄下的index.html文件，代理只會(huì)轉(zhuǎn)發(fā)【本地public文件夾中沒(méi)有的資源】

--------------------------更新---------------------------------

現(xiàn)在好像會(huì)出現(xiàn)proxy is not a function的報(bào)錯(cuò)

應(yīng)該是版本更新問(wèn)題，將proxy替換為createProxyMiddleware即可

總結(jié)

以上是生活随笔為你收集整理的axios请求与proxy代理配置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。