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

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

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

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

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

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

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

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

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

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

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

因此將代碼改為：

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

如果無(wú)法解決404錯(cuò)誤，則使用第二種方法。

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

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

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

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

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

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

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

2.接口寫(xiě)法,

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

在main.js中加入

axios.defaults.baseURL = '/api'

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

4.要是以上都沒(méi)有問(wèn)題還是404 那就是緩存了，換瀏覽器，多重啟幾次！?。∥业木褪悄婷罹秃昧?。

總結(jié)

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

相關(guān)文章

最新評(píng)論