vue.config.js配置proxy代理产生404错误的原因及解决
更新时间：2024年06月20日 09:05:27 作者：kingtopest
这篇文章主要介绍了vue.config.js配置proxy代理产生404错误的原因及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
在使用vue做开发时，请求api接口时为了解决跨域问题，一般会设置proxy代理，
但有时候会莫名其妙的出现404错误，这里总结一下vue设置proxy代理产生404错误的几种原因：
原因1：没有注意vue proxy代理优先级的规则
vue proxy代理匹配的规则是按照配置的内容从上到下，顺序逐个匹配的
因此第一个被匹配到的规则生效以后, 后面就不会被匹配到
举个例子：
proxy: {
"/api/": {
target: "http://proxyAddr:port",
changeOrigin: true,
pathRewrite: {
"^/api": "",
},
},
"/api2/": {
target: "http://proxyAddr2:port",
changeOrigin: true,
pathRewrite: {
"^/api2": "",
},
},
}按照上面的写法：
- 如果有一个/api2的请求进来，会直接被第一条"/api"的规则匹配到
- 而后面的"/api2"的规则就不会被匹配到，所以此时就会产生404错误
解决办法
把/api2的匹配规则放到/api的前面
注意点小结：
- 对于有同名前缀的uri路径（比如/api和/apixxxx这样的）
- 为了避免长uri路径被短uri规则匹配到,而后面的规则不生效
- 必须把短uri路径的匹配规则放到文件的最后
原因２：pathRewrite路径重写配置错误
这个例子中pathWrite写错了：
- 被重写的部分跟进来的url内容完全不同，没有被识别到
- 这种情况也会发生路由匹配不到引发的404错误
所以，必须注意：
- pathWrite的被重写的路径必须跟匹配规则定义的uri保持一致！
- 否则就会报404错误！
总结
以上就是vue.config.js配置proxy代理发生404错误的两大原因。
这些仅为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue3.0 vue-router4.0打包后页面空白的解决方法
本文主要介绍了vue3.0 vue-router4.0打包后页面空白的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
Vue3 Element-plus el-menu无限级菜单组件封装过程
对于element中提供给我们的el-menu组件最多可以实现三层嵌套，如果多一层数据只能自己通过变量去加一层，如果加了两层、三层这种往往是行不通的，所以只能进行封装，这篇文章主要介绍了Vue3 Element-plus el-menu无限级菜单组件封装,需要的朋友可以参考下2023-04-04
这篇文章主要为大家介绍了Vue3之使用js实现动画示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了Vue中多个元素、组件的过渡及列表过渡的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-02-02
这篇文章主要介绍了Vue 嵌套路由使用总结,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-01
写了vue项目和小程序，发现二者有许多相同之处，在此想总结一下二者的共同点和区别,需要的朋友可以参考下2018-08-08
ElementUI 组件之Layout布局(el-row、el-col)
这篇文章主要介绍了ElementUI 组件之Layout布局(el-row、el-col),本文通过实例代码图文相结合给大家介绍的非常详细,感兴趣的朋友一起看看吧2024-07-07
vuex是vue的状态管理模式，主要可以解决父子组件嵌套层数较多，或者兄弟组件之间需要维护同一个状态的情况。下面这篇文章主要给大家介绍了关于学习vuex的相关资料，需要的朋友可以参考学习，下面来一起看看吧。2017-04-04
前端上传文件很大时,会出现各种问题,比如连接超时了,网断了,都会导致上传失败,这个时候就需要将文件切片上传,下面我们就来学习一下如何使用vue实现大文件切片上传吧2023-11-11
这篇文章主要介绍了vue 集成 sweetalert2 提示组件的问题，本文通过项目案例实例代码相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-11-11
最新评论