vue代理請(qǐng)求之Request?failed?with?status?code?404問題及解決
vue代理請(qǐng)求Request failed with status code 404
將你安裝的proxy 或者是 createProxyMiddleware重新安裝一遍 可能是因?yàn)?版本過低的原因重新 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時(shí)常見報(bào)錯(cuò)
常見問題-跨域(要配置一下vue.config.js)噢
跨域的解釋、定義:當(dāng)前所在頁面的url去請(qǐng)求后臺(tái)提供的url的時(shí)候,這兩個(gè)url的相比較之下,如果協(xié)議類型、域名、端口號(hào)其中任何一個(gè)不一致就會(huì)發(fā)生跨域問題
1.404

- 可能是后端的bug,還沒部署好(接口未處理)之類的
- 可能是前端問題:路徑錯(cuò)誤(拼寫錯(cuò)誤?。。。?/li>
- 跨域問題-路徑?jīng)]寫對(duì)
這是我main.js的配置(個(gè)人習(xí)慣不一樣,可能不同噢)

這是vue里面的寫法,需要注意記著寫寫’${}‘否則跨域代理不會(huì)成功
![[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(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)]](http://img.jbzj.com/file_images/article/202307/2023070415393952.png)
然后如果是js里面就直接寫名字,不用寫${}
![[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(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)]](http://img.jbzj.com/file_images/article/202307/2023070415393953.png)
2.500
請(qǐng)求成功后的500
![[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-yABhwcJi-1636893445923)(Vue-cli筆記從安裝到基礎(chǔ)入門.assets/image-20211104133822333.png)]](http://img.jbzj.com/file_images/article/202307/2023070415393954.png)
問題:后端服務(wù)器沒開?------我記得似乎是欸
3.攔截器有誤Cannot read propertiesding ‘cancelToken’
![[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-l9cP6Vbj-1636893445930)(Vue-cli筆記從安裝到基礎(chǔ)入門.assets/image-20211104171011053.png)]](http://img.jbzj.com/file_images/article/202307/2023070415393955.png)
是因?yàn)樵谔砑诱?qǐng)求攔截器的時(shí)候,最后沒有添加返回值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,還沒部署好之類的,我們就等等,多問問,多和后端哥哥姐姐交流交流。嗚嗚嗚,不要悶頭一個(gè)人肝代碼,寫不出來、還是錯(cuò)的、五個(gè)小時(shí)過去了、進(jìn)度為0、會(huì)懷疑人生的
- 也可能是請(qǐng)求頭的問題(數(shù)據(jù)拼接在url里面or單獨(dú)傳輸)
- 可能是后端要求的數(shù)據(jù)不一致和發(fā)送的數(shù)據(jù)不一致(看看前后端接口,是否數(shù)據(jù)命名一致)
嘗試解決
這是一種解決方式:先網(wǎng)址訪問,看看后端是否有數(shù)據(jù)返回(看看是否部署好之類的)
![[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-ElXxtseG-1636893445933)(Vue-cli筆記從安裝到基礎(chǔ)入門.assets/image-20211104134404739.png)]](http://img.jbzj.com/file_images/article/202307/2023070415393956.png)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
10個(gè)Vue3性能優(yōu)化的實(shí)用技巧分享
這篇文章總結(jié)了10個(gè)Vue3中最容易被忽略,但對(duì)性能提升最有效的實(shí)戰(zhàn)技巧,適合新老開發(fā)者收藏使用,文中的示例代碼講解詳細(xì),感興趣的小編好可以了解下2026-01-01
vue前端如何將任意文件轉(zhuǎn)為base64傳給后端
這篇文章主要介紹了vue前端如何將任意文件轉(zhuǎn)為base64傳給后端問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
VS-Code中Vue3項(xiàng)目創(chuàng)建vite方式
用戶詳細(xì)說明了使用Node.js和Vite創(chuàng)建Vue3項(xiàng)目的過程,包括安裝依賴、項(xiàng)目結(jié)構(gòu)解析(如src/main.ts、App.vue、components、assets等),以及VSCode插件配置建議,強(qiáng)調(diào)核心插件安裝和依賴管理的重要性2025-08-08
詳解Vue CLI3 多頁應(yīng)用實(shí)踐和源碼設(shè)計(jì)
這篇文章主要介紹了詳解Vue CLI3 多頁應(yīng)用實(shí)踐和源碼設(shè)計(jì),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
Vue表單驗(yàn)證插件Vue Validator使用方法詳解
這篇文章主要為大家詳細(xì)介紹了Vue表單驗(yàn)證插件Vue Validator使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04
用Vue.js在瀏覽器中實(shí)現(xiàn)裁剪圖像功能
在本教程中,我們將探討如何在瀏覽器中使用 JavaScript 庫(kù)來操作圖片,為服務(wù)器上的存儲(chǔ)做準(zhǔn)備,并在 Web 程序中使用。我們將使用 Vue.js 而不是原生 JavaScript來完成此操作,需要的朋友可以參考下2019-06-06

