欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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

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

需要進行pathRewrite重寫

比如：你想訪問的真實地址為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重寫，那么代理完你真實的地址則為：http://39.98.123.211/api/user/list，明顯多了/api，因此會出現(xiàn)404錯誤。

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

所以要對/api重寫，如果你的真實路徑中正好為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項目則在vue.config.js中寫代理即可，如果你是vue2項目，代理請求出現(xiàn)404，且第一種方法無效，則將代理代碼寫入config文件夾下的index.js中的proxyTable：{}中

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

由于我的真實地址中有/api所以就沒進行/api重寫。記住代理寫完，要重寫運行項目。

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

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

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

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

總結(jié)

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

相關(guān)文章

最新評論