快捷導(dǎo)航

vue代理請(qǐng)求之Request?failed?with?status?code?404問(wèn)題及解決

更新時(shí)間：2023年07月04日 15:46:50 作者：leo_six_ovo

這篇文章主要介紹了vue代理請(qǐng)求之Request?failed?with?status?code?404問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue代理請(qǐng)求Request failed with status code 404

將你安裝的proxy 或者是 createProxyMiddleware重新安裝一遍可能是因?yàn)?版本過(guò)低的原因重新 npm

npm install --save-dev proxy
npm install --save-dev http-proxy-middleware

Error: Request failed with status code 404 at createError (createError、跨域問(wèn)題、axios、404、500

前后端分離，寫(xiě)axios時(shí)常見(jiàn)報(bào)錯(cuò)

常見(jiàn)問(wèn)題-跨域（要配置一下vue.config.js）噢

跨域的解釋、定義：當(dāng)前所在頁(yè)面的url去請(qǐng)求后臺(tái)提供的url的時(shí)候，這兩個(gè)url的相比較之下，如果協(xié)議類(lèi)型、域名、端口號(hào)其中任何一個(gè)不一致就會(huì)發(fā)生跨域問(wèn)題

1.404

在這里插入圖片描述

可能是后端的bug，還沒(méi)部署好(接口未處理)之類(lèi)的
可能是前端問(wèn)題：路徑錯(cuò)誤（拼寫(xiě)錯(cuò)誤！?。。?/li>
跨域問(wèn)題-路徑?jīng)]寫(xiě)對(duì)

這是我main.js的配置（個(gè)人習(xí)慣不一樣，可能不同噢）

在這里插入圖片描述

這是vue里面的寫(xiě)法，需要注意記著寫(xiě)寫(xiě)’${}‘否則跨域代理不會(huì)成功

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-W2aMBUJF-1636893445917)(Vue-cli%E7%AC%94%E8%AE%B0%E4%BB%8E%E5%AE%89%E8%A3%85%E5%88%B0%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8.assets/image-20211114202746380.png)]

然后如果是js里面就直接寫(xiě)名字，不用寫(xiě)${}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-U3wZhz8V-1636893445920)(Vue-cli%E7%AC%94%E8%AE%B0%E4%BB%8E%E5%AE%89%E8%A3%85%E5%88%B0%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8.assets/image-20211114203633045.png)]

2.500

請(qǐng)求成功后的500

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-yABhwcJi-1636893445923)(Vue-cli筆記從安裝到基礎(chǔ)入門(mén).assets/image-20211104133822333.png)]

問(wèn)題：后端服務(wù)器沒(méi)開(kāi)？------我記得似乎是欸

3.攔截器有誤Cannot read propertiesding ‘cancelToken’

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-l9cP6Vbj-1636893445930)(Vue-cli筆記從安裝到基礎(chǔ)入門(mén).assets/image-20211104171011053.png)]

是因?yàn)樵谔砑诱?qǐng)求攔截器的時(shí)候，最后沒(méi)有添加返回值return config方法正確的寫(xiě)法應(yīng)該是：

axios.interceptors.request.use((config)=>{undefined
if(getStore(‘token')){undefined
config.headers.Authorization=getStore(‘token');
}
return config;
},(error)=>{undefined
console.log(error);
});

建議

可能是后端的日常小bug，還沒(méi)部署好之類(lèi)的，我們就等等，多問(wèn)問(wèn)，多和后端哥哥姐姐交流交流。嗚嗚嗚,不要悶頭一個(gè)人肝代碼，寫(xiě)不出來(lái)、還是錯(cuò)的、五個(gè)小時(shí)過(guò)去了、進(jìn)度為0、會(huì)懷疑人生的
也可能是請(qǐng)求頭的問(wèn)題（數(shù)據(jù)拼接在url里面or單獨(dú)傳輸）
可能是后端要求的數(shù)據(jù)不一致和發(fā)送的數(shù)據(jù)不一致(看看前后端接口，是否數(shù)據(jù)命名一致)