亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue代理請求數(shù)據(jù)出現(xiàn)404問題及解決

 更新時間：2023年07月04日 09:41:45   作者：小羔子1997  
這篇文章主要介紹了Vue代理請求數(shù)據(jù)出現(xiàn)404的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue代理請求數(shù)據(jù)出現(xiàn)404

當(dāng)使用代理解決跨域問題出現(xiàn)404錯誤時，一般有兩種原因。

需要進(jìn)行pathRewrite重寫

比如：你想訪問的真實(shí)地址為http://39.98.123.211/user/list，你請求的url為/api/user/list下面是你的代理程序

 module.exports = {
   lintOnSave:false,
   //配置代理跨域
   devServer:{
     proxy:{
       "/api":{
         target:"http://39.98.123.211",
       }
    }
  }
 }

如果沒有對/api重寫，那么代理完你真實(shí)的地址則為：http://39.98.123.211/api/user/list，明顯多了/api，因此會出現(xiàn)404錯誤。

我們進(jìn)行代理時，路徑中有/api，則會使用http://39.98.123.211，再加上url，則就為我們的請求地址 http://39.98.123.211/api/user/list。

所以要對/api重寫，如果你的真實(shí)路徑中正好為http://39.98.123.211/api/user/list，包含了/api那就不用重寫。

因此將代碼改為：

module.exports = {
   lintOnSave:false,
   //配置代理跨域
   devServer:{
     proxy:{
       "/api":{
         target:"http://39.98.123.211",
         pathRewrite:{
         	'^/api':'',
         }
       }
    }
  }
 }

如果無法解決404錯誤，則使用第二種方法。

將代理代碼放入config文件夾下的index.js文件中

如果你是vue3項(xiàng)目則在vue.config.js中寫代理即可，如果你是vue2項(xiàng)目，代理請求出現(xiàn)404，且第一種方法無效，則將代理代碼寫入config文件夾下的index.js中的proxyTable：{}中

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      //配置代理跨域
          "/api":{
            target:"http://39.98.123.211",
      },
    },

由于我的真實(shí)地址中有/api所以就沒進(jìn)行/api重寫。記住代理寫完，要重寫運(yùn)行項(xiàng)目。

vue跨越解決以及代理之后會出現(xiàn)404

1.根目錄下創(chuàng)建vue.config.js

// vue.config.js
module.exports = {
? ? devServer: {
? ? ? ? proxy: {
? ? ? ? ? ? // 當(dāng)你vue請求路徑中包含/api，那么vue會自動幫你代理請求到你的后端地址
? ? ? ? ? ? // 比如我vue請求的是 '/api/user/getUser'，那么會幫我代理請求到后端地址
? ? ? ? ? ? '/api': {
? ? ? ? ? ? ? ? // 后端地址
? ? ? ? ? ? ? ? target: "http://127.0.0.1:8088",
? ? ? ? ? ? ? ? /**
? ? ? ? ? ? ? ? ? ? 官方文檔的意思：將主機(jī)頭的來源更改為目標(biāo) URL
? ? ? ? ? ? ? ? ? ? 簡單理解就是需不需要代理
? ? ? ? ? ? ? ? **/
? ? ? ? ? ? ? ? changeOrigin: true,
? ? ? ? ? ? ? ? /**
? ? ? ? ? ? ? ? ? ? 重寫目標(biāo)地址，比如我vue請求的是/api/user/getUser
? ? ? ? ? ? ? ? ? ? 經(jīng)歷過重寫之后，我們請求的地址是http://localhost:8081/user/getUser
? ? ? ? ? ? ? ? ? ? 這里用的是正則表達(dá)式，^符號是用來限制開頭
? ? ? ? ? ? ? ? ? ? 意思就是匹配vue請求的開頭是否為/api，是的話就進(jìn)行重寫替換
? ? ? ? ? ? ? ? **/
? ? ? ? ? ? ? ? pathRewrite: {
? ? ? ? ? ? ? ? ? ? ["^/api"]: ""
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? }
}

2.接口寫法,

? ? this.axios({method:"post",url:"/user/login",data:{
? ? ? tel:"admin",
? ? ? passWord:"admin"
? ? }}).then(res=>{
? ? ? console.log(res)
? ? }) ??

在main.js中加入

axios.defaults.baseURL = '/api'

3.重新啟動項(xiàng)目

4.要是以上都沒有問題還是404 那就是緩存了，換瀏覽器，多重啟幾次?。?！我的就是莫名奇妙就好了。

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論