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

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

? ? ?在src文件夾中新建文件setupProxy.js添加配置，項目進行啟動的時候會自動遍歷到這個文件并加入webpack中。

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

?分析：

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

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

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

接下來討論具體的配置以及路徑設置方法?

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

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

現(xiàn)在好像會出現(xiàn)proxy is not a function的報錯

應該是版本更新問題，將proxy替換為createProxyMiddleware即可

總結

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

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