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）噢

跨域的解释、定义：当前所在页面的url去请求后台提供的url的时候，这两个url的相比较之下，如果协议类型、域名、端口号其中任何一个不一致就会发生跨域问题

1.404

在这里插入图片描述

可能是后端的bug，还没部署好(接口未处理)之类的
可能是前端问题：路径错误（拼写错误！！！）
跨域问题-路径没写对

这是我main.js的配置（个人习惯不一样，可能不同噢）

在这里插入图片描述

这是vue里面的写法，需要注意记着写写’${}‘否则跨域代理不会成功

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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里面就直接写名字，不用写${}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yABhwcJi-1636893445923)(Vue-cli笔记从安装到基础入门.assets/image-20211104133822333.png)]

问题：后端服务器没开？------我记得似乎是欸

3.拦截器有误Cannot read propertiesding ‘cancelToken’

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l9cP6Vbj-1636893445930)(Vue-cli笔记从安装到基础入门.assets/image-20211104171011053.png)]

是因为在添加请求拦截器的时候，最后没有添加返回值return config方法正确的写法应该是：

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

建议

可能是后端的日常小bug，还没部署好之类的，我们就等等，多问问，多和后端哥哥姐姐交流交流。呜呜呜,不要闷头一个人肝代码，写不出来、还是错的、五个小时过去了、进度为0、会怀疑人生的
也可能是请求头的问题（数据拼接在url里面or单独传输）
可能是后端要求的数据不一致和发送的数据不一致(看看前后端接口，是否数据命名一致)

尝试解决

这是一种解决方式：先网址访问，看看后端是否有数据返回（看看是否部署好之类的）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ElXxtseG-1636893445933)(Vue-cli笔记从安装到基础入门.assets/image-20211104134404739.png)]

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

element 动态合并表格的步骤
这篇文章主要介绍了element 动态合并表格的步骤，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
2020-12-12
10个Vue3性能优化的实用技巧分享
这篇文章总结了10个Vue3中最容易被忽略,但对性能提升最有效的实战技巧,适合新老开发者收藏使用,文中的示例代码讲解详细,感兴趣的小编好可以了解下
2026-01-01
Vue组件化通讯的实例代码
这篇文章主要介绍了Vue组件化通讯的实例代码的相关资料,需要的朋友可以参考下
2017-06-06
vue前端如何将任意文件转为base64传给后端
这篇文章主要介绍了vue前端如何将任意文件转为base64传给后端问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
基于vue实现微博三方登录流程解析
这篇文章主要介绍了基于vue实现微博三方登录流程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-11-11
VS-Code中Vue3项目创建vite方式
用户详细说明了使用Node.js和Vite创建Vue3项目的过程,包括安装依赖、项目结构解析（如src/main.ts、App.vue、components、assets等）,以及VSCode插件配置建议,强调核心插件安装和依赖管理的重要性
2025-08-08
Vue和React响应式的区别及说明
React和Vue在响应式机制上各有特点：Vue通过Proxy或Object.defineProperty自动追踪依赖,支持细粒度更新；React基于不可变数据,通过setState显式触发更新,依赖虚拟DOM的Diff算法批量更新,Vue强调声明式和自动优化,React强调函数式编程和显式控制
2025-02-02
详解Vue CLI3 多页应用实践和源码设计
这篇文章主要介绍了详解Vue CLI3 多页应用实践和源码设计，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
Vue表单验证插件Vue Validator使用方法详解
这篇文章主要为大家详细介绍了Vue表单验证插件Vue Validator使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
用Vue.js在浏览器中实现裁剪图像功能
在本教程中，我们将探讨如何在浏览器中使用 JavaScript 库来操作图片，为服务器上的存储做准备，并在 Web 程序中使用。我们将使用 Vue.js 而不是原生 JavaScript来完成此操作,需要的朋友可以参考下
2019-06-06