vue設(shè)置代理不起作用問題及解決
vue設(shè)置代理不起作用
使用vue寫前端界面時(shí),需調(diào)用后端接口展現(xiàn)查詢的數(shù)據(jù),于是設(shè)置代理實(shí)現(xiàn)跨域,在config/index.js中添加代理,代碼如下:
proxyTable:{ // 匹配 /dev-api 開頭的請(qǐng)求, 比如:A網(wǎng)站:https://localhost:8888 中的index.html 頁(yè)面發(fā)送AJax請(qǐng)求:/dev-api/data.json 'dev-api': { target:'http://localhost:3001', // 開啟代理:在本地會(huì)創(chuàng)建一個(gè)虛擬服務(wù)端,然后發(fā)送請(qǐng)求的數(shù)據(jù), // 并同時(shí)接收請(qǐng)求的數(shù)據(jù),這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會(huì)有跨域問題 changOrigin: true, //開啟代理 pathRewrite: { "^/dev-api": '' } } },
運(yùn)行后發(fā)現(xiàn)報(bào)錯(cuò)404
測(cè)試后端接口無(wú)問題,著重看代理部分代碼,百度后發(fā)現(xiàn) “dev-api"前面應(yīng)加”/",
否則會(huì)出現(xiàn)上述錯(cuò)誤。
完整代碼如下:
proxyTable:{ // 匹配 /dev-api 開頭的請(qǐng)求, 比如:A網(wǎng)站:https://localhost:8888 中的index.html 頁(yè)面發(fā)送AJax請(qǐng)求:/dev-api/data.json '/dev-api': { target:'http://localhost:3001', // 開啟代理:在本地會(huì)創(chuàng)建一個(gè)虛擬服務(wù)端,然后發(fā)送請(qǐng)求的數(shù)據(jù), // 并同時(shí)接收請(qǐng)求的數(shù)據(jù),這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會(huì)有跨域問題 changOrigin: true, //開啟代理 pathRewrite: { "^/dev-api": '' } } },
除此之外,修改代理后應(yīng)重啟一下,否則修改內(nèi)容不生效。
vue配置代理方式
正向代理配置
環(huán)境配置文件 .env.development
ENV = 'development' VUE_APP_BASE_API="/dev-api"
vue配置文件 vue.config.js
devServer: { ? ? proxy:'http://localhost:8080'//所有的接口請(qǐng)求都會(huì)被代理到這個(gè)路徑上 }, devServer: { ? ? proxy:{ ? ? ? ? '/dev-api':{//只要是這個(gè)路徑下的請(qǐng)求都會(huì)被代理到target中 ? ? ? ? ? ? target:'http://localhost:8888', ? ? ? ? ? ? pathRewrite:{'^/dev-api':''}//路徑重寫:/dev-api路徑將不會(huì)出現(xiàn),如果改成'^/dev-api':'test',則重寫的路徑/dev-api會(huì)變成test ? ? ? ? } ? ? } },
注意點(diǎn):使用正向代理時(shí),不要手動(dòng)的寫全路徑,不要手動(dòng)的寫全路徑,不要手動(dòng)的寫全路徑,(重要的事情說(shuō)三遍)寫了全路徑則代理失效
全路徑:http://localhost:8080 即:協(xié)議、域名、端口
只要寫一個(gè)代理路徑即可:VUE_APP_BASE_API =/dev-api
環(huán)境變量配置文件
你可以在你的項(xiàng)目根目錄中放置下列文件來(lái)指定環(huán)境變量:
.env ? ? ? ? ? ? ? ?# 在所有的環(huán)境中被載入 .env.local ? ? ? ? ?# 在所有的環(huán)境中被載入,但會(huì)被 git 忽略 .env.[mode] ? ? ? ? # 只在指定的模式中被載入 .env.[mode].local ? # 只在指定的模式中被載入,但會(huì)被 git 忽略 # mode 代表環(huán)境變量:development、production和test。不同的文件名在不同的環(huán)境下自動(dòng)生效
請(qǐng)注意,只有 NODE_ENV,BASE_URL 和以 VUE_APP_ 開頭的變量將通過 webpack.DefinePlugin 靜態(tài)地嵌入到客戶端側(cè)的代碼中。
這是為了避免意外公開機(jī)器上可能具有相同名稱的私鑰。
目錄
.env.production//生產(chǎn)環(huán)境配置 .env.develoption//開發(fā)環(huán)境配置
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
在vue中對(duì)數(shù)組值變化的監(jiān)聽與重新響應(yīng)渲染操作
這篇文章主要介紹了在vue中對(duì)數(shù)組值變化的監(jiān)聽與重新響應(yīng)渲染操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-07-07vue-devtools 打開源碼位置實(shí)現(xiàn)過程
這篇文章主要為大家介紹了vue-devtools 打開源碼位置實(shí)現(xiàn)過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09vue生命周期beforeDestroy和destroyed調(diào)用方式
這篇文章主要介紹了vue生命周期beforeDestroy和destroyed調(diào)用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06基于vue-seamless-scroll實(shí)現(xiàn)無(wú)縫滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了基于vue-seamless-scroll實(shí)現(xiàn)無(wú)縫滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04vue如何動(dòng)態(tài)實(shí)時(shí)的顯示時(shí)間淺析
這篇文章主要給大家介紹了關(guān)于vue如何動(dòng)態(tài)實(shí)時(shí)的顯示時(shí)間,以及vue時(shí)間戳 獲取本地時(shí)間實(shí)時(shí)更新的相關(guān)資料,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05Vite圖片資源打包優(yōu)化的實(shí)現(xiàn)
本文主要介紹了Vite圖片資源打包優(yōu)化的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04如何測(cè)量vue應(yīng)用運(yùn)行時(shí)的性能
這篇文章主要介紹了如何測(cè)量vue應(yīng)用運(yùn)行時(shí)的性能,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,,需要的朋友可以參考下2019-06-06