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)]

总结

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

您可能感兴趣的文章:

Vue守卫零基础介绍
导航守卫就是路由跳转过程中的一些钩子函数，这个过程中触发的这些函数能让你有操作一些其他的事儿的时机，这就是导航守卫，守卫适用于切面编程，即把一件事切成好几块，然后分给不同的人去完成，提高工作效率，也可以让代码变得更加优雅
2022-09-09
Vue2如何支持composition API示例详解
这篇文章主要为大家介绍了Vue2如何支持composition API示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
VUE3子表格嵌套分页查询互相干扰的问题解决方案
这篇文章主要介绍了VUE3子表格嵌套分页查询互相干扰的问题解决方案,如果不需要做子表格的分页查询，那么可以直接在主表格中嵌套子表格，本文给大家介绍两种方式，需要的朋友可以参考下
2024-01-01
VUE.js实现动态设置输入框disabled属性
今天小编就为大家分享一篇VUE.js实现动态设置输入框disabled属性，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
ElementUI Tree 树形控件的使用并给节点添加图标
这篇文章主要介绍了ElementUI Tree 树形控件的使用并给节点添加图标，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
详解vue.js 开发环境搭建最简单攻略
本篇文章主要介绍了vue.js 开发环境搭建最简单攻略，这里整理了详细的步骤，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
Vue中的数据监听和数据交互案例解析
这篇文章主要介绍了Vue中的数据监听和数据交互案例解析,在文章开头部分先给大家介绍了vue中的数据监听事件$watch，具体代码讲解，大家可以参考下本文
2017-07-07
实例分析编写vue组件方法
在本篇文章中我们给大家总结了关于编写vue组件的方法知识点，有此需要的读者们跟着学习下。
2019-02-02
解决父组件将子组件作为弹窗调用只执行一次created的问题
这篇文章主要介绍了解决父组件将子组件作为弹窗调用只执行一次created的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue 中this.$set 动态绑定数据的案例讲解
这篇文章主要介绍了vue 中this.$set 动态绑定数据的案例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2021-01-01