vue設(shè)置代理不起作用問(wèn)題及解決

更新時(shí)間：2022年05月12日 15:56:26 作者：姜意%

這篇文章主要介紹了vue設(shè)置代理不起作用問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue設(shè)置代理不起作用

使用vue寫(xiě)前端界面時(shí)，需調(diào)用后端接口展現(xiàn)查詢的數(shù)據(jù)，于是設(shè)置代理實(shí)現(xiàn)跨域，在config/index.js中添加代理，代碼如下：

proxyTable:{
      // 匹配 /dev-api 開(kāi)頭的請(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',
        // 開(kāi)啟代理：在本地會(huì)創(chuàng)建一個(gè)虛擬服務(wù)端，然后發(fā)送請(qǐng)求的數(shù)據(jù)，
        // 并同時(shí)接收請(qǐng)求的數(shù)據(jù)，這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會(huì)有跨域問(wèn)題
        changOrigin: true, //開(kāi)啟代理
        pathRewrite: {
            "^/dev-api": ''
        }
      }
    },

運(yùn)行后發(fā)現(xiàn)報(bào)錯(cuò)404

在這里插入圖片描述

測(cè)試后端接口無(wú)問(wèn)題，著重看代理部分代碼，百度后發(fā)現(xiàn) “dev-api"前面應(yīng)加”/"，

否則會(huì)出現(xiàn)上述錯(cuò)誤。

完整代碼如下：

proxyTable:{
      // 匹配 /dev-api 開(kāi)頭的請(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',
        // 開(kāi)啟代理：在本地會(huì)創(chuàng)建一個(gè)虛擬服務(wù)端，然后發(fā)送請(qǐng)求的數(shù)據(jù)，
        // 并同時(shí)接收請(qǐng)求的數(shù)據(jù)，這樣服務(wù)端和服務(wù)端進(jìn)行數(shù)據(jù)的交互就不會(huì)有跨域問(wèn)題
        changOrigin: true, //開(kāi)啟代理
        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':''}//路徑重寫(xiě)：/dev-api路徑將不會(huì)出現(xiàn)，如果改成'^/dev-api':'test'，則重寫(xiě)的路徑/dev-api會(huì)變成test
? ? ? ? }
? ? }
},

注意點(diǎn)：使用正向代理時(shí)，不要手動(dòng)的寫(xiě)全路徑，不要手動(dòng)的寫(xiě)全路徑，不要手動(dòng)的寫(xiě)全路徑，（重要的事情說(shuō)三遍）寫(xiě)了全路徑則代理失效

全路徑：http://localhost:8080 即：協(xié)議、域名、端口

只要寫(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_ 開(kāi)頭的變量將通過(guò) webpack.DefinePlugin 靜態(tài)地嵌入到客戶端側(cè)的代碼中。

這是為了避免意外公開(kāi)機(jī)器上可能具有相同名稱(chēng)的私鑰。