vue之數據代理詳解
解決跨域的方式有多種,例如jsonp、cors但這兩種都需要后臺人員的幫助,
一、下面我講的是前端人員在vue-cli中就可以完成的一種解決方式——數據代理
(1)首先需要在vue-cli官方文檔的配置項下載一個插件

(2)將上圖紅圈中的部分粘貼到vue腳手架的babel.config.js中

(3)上圖中紅圈部分http://localhost:5000為本地服務器地址,但我項目起的服務為http://localhost:8082/
此時我在項目中向后臺發(fā)送請求

就能夠獲取數據了

注意要是你項目中punlic文件夾有和本地服務器相同名稱的文件,那將會優(yōu)先在項目中public文件夾讀取
二、上面的數據代理還是有以下缺陷的
(1)本地public中有和服務器文件名相同的,會優(yōu)先返回本地的
(2)只能創(chuàng)建單個代理
1、為了解決以上問題,可以采用另外一種創(chuàng)建代理的方式

上圖/api和/apii為兩個不同的數據代理
2、同時前端發(fā)送請求的接口路徑也要進行更改,由http://localhost:8082/students改為以下,這樣寫就不會請求本地public中的文件了

總結
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關注腳本之家的更多內容!
相關文章
關于@click.native中?.native?的含義與使用方式
這篇文章主要介紹了關于@click.native中?.native?的含義與使用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10
vue props傳值失敗 輸出undefined的解決方法
今天小編就為大家分享一篇vue props傳值失敗 輸出undefined的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09

