快捷導(dǎo)航

vue代理請求之Request?failed?with?status?code?404問題及解決

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

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

vue代理請求Request failed with status code 404

將你安裝的proxy 或者是 createProxyMiddleware重新安裝一遍可能是因為版本過低的原因重新 npm

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

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

前后端分離，寫axios時常見報錯

常見問題-跨域（要配置一下vue.config.js）噢

跨域的解釋、定義：當(dāng)前所在頁面的url去請求后臺提供的url的時候，這兩個url的相比較之下，如果協(xié)議類型、域名、端口號其中任何一個不一致就會發(fā)生跨域問題

1.404

在這里插入圖片描述

可能是后端的bug，還沒部署好(接口未處理)之類的
可能是前端問題：路徑錯誤（拼寫錯誤?。。。?/li>
跨域問題-路徑?jīng)]寫對

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

在這里插入圖片描述

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

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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里面就直接寫名字，不用寫${}

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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

請求成功后的500

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

問題：后端服務(wù)器沒開？------我記得似乎是欸

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

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

是因為在添加請求攔截器的時候，最后沒有添加返回值return config方法正確的寫法應(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，還沒部署好之類的，我們就等等，多問問，多和后端哥哥姐姐交流交流。嗚嗚嗚,不要悶頭一個人肝代碼，寫不出來、還是錯的、五個小時過去了、進度為0、會懷疑人生的
也可能是請求頭的問題（數(shù)據(jù)拼接在url里面or單獨傳輸）
可能是后端要求的數(shù)據(jù)不一致和發(fā)送的數(shù)據(jù)不一致(看看前后端接口，是否數(shù)據(jù)命名一致)