vue代理配置没问题但是报错404

最新推荐文章于 2023-12-20 10:02:14 发布
最新推荐文章于 2023-12-20 10:02:14 发布
阅读量475 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/onecaicai/article/details/134370549
版权

原因：没有注意vue proxy代理优先级的规则：

vue proxy代理匹配的规则是按照配置的内容从上到下，顺序逐个匹配的，因此第一个被匹配到的规则生效以后, 后面就不会被匹配到：
在这里插入图片描述
如上图，若“/api”在“/statisticApi”上方，且你要使用/statisticApi，那么在匹配到/api的时候就认为已经匹配成功，不会继续往下找/statisticApi。在/api里自然找不到/statisticApi里的接口啦，所以报错404.

要想不出问题，有两个方法：

  1. 代理名称之间不能有包含与被包含的关系
  2. 较长的代理名称放在最上方，/api这种短的放在下方
onecaicai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何正确解决VuePress本地访问出现资源报错404的问题
01-18
背景 最近发现好多小伙伴刚用VuePress，然后一build完就直接用本地浏览器访问，结果出现黑块。仅仅出现那种问题还好，给项目安装 vuepress-plugin-serve 插件就行了， 但是如果有需求是需要离线查看 VuePress 生成后的文档呢？所以我特地研究了一下—— 解决办法 打开 .vuepress/config.js 文件，把 base 的值改成 ./，为了方便调试，最好这样写： //base: /, base: ./, 写两个，一个用于Dev，一个用于Build。 然后打开项目下的 node_modules\@vuepress\core\lib\clien
解决vue项目本地开发完成后部署到服务器后报404的问题
最新发布
多看书少吃饭的博客
03-06 2167
vue项目本地开发完成后部署到服务器后报404是什么原因呢？
Vue.js - 使用History模式反向代理Nginx配置404错误
chaishen10000的专栏
06-01 2548
History模式这样不灵了，需要注意两点：#防止刷新出现404错误2、要加"/"结尾配置proxy_pass时，当在后面的url加上了/，相当于是绝对根路径，则nginx不会把location中匹配的路径部分代理走；如果没有/，则会把匹配的路径部分也给代理走（这样配置在Nginx反向代理+负载均衡简单实现（http方式）也提到过）。
Vue代理请求数据出现404
weixin_40380115的博客
12-15 1万+
Vue代理请求数据出现404错误
vue项目使用proxy代理跨域，服务器部署接口404及history模式刷新404界面问题解决
hgy1329852351的博客
07-30 3784
vue项目使用proxy代理跨域，服务器部署接口404及history模式刷新404界面问题解决
vue跨越解决；及代理之后会出现404
YC2chen的博客
08-16 1664
4.要是以上都没有问题还是404 那就是缓存了，换浏览器，多重启几次！我的就是莫名奇妙就好了。1.根目录下创建vue.config.js。
Vue3配置代理后页面500/404
Suciy的博客
05-24 2216
base：base 是 Vite 配置中的一个选项，用于指定项目的基本公共路径。proxy：proxy 是 Vite 配置中的一个选项，用于配置开发服务器的代理转发。可以看见，vite是将base拼接的地址通过fetch加载文件，fetch是一个异步请求，如果此时base与代理地址重名，那么静态资源将会被代理到服务器，所以会出现文件找不到的问题。但是配置完后前端页面一直处于404的状态，网络请求显示500，我以为是路由的问题各种排查，甚至把官网Vue-Router的实例down下来，发现人家都是可以的。
解决VueCil代理本地proxytable无效报错404的问题
01-22
因为项目中遇到了这个bug：Vue cil2中配置代理proxytable成功，却无效报错404，在后端和代理都配置无误的情况下，还是报404，先已解决，特记录，希望能帮助到他人； 正文 1. 为什么要使用代理？ 代理的作用是：把...
解决vue 引入子组件报错的问题
10-18
总结来说，解决Vue引入子组件报错的问题关键在于遵循Vue的组件命名规则，避免使用HTML保留标签作为组件ID。合理地命名和注册组件，不仅可以避免潜在的冲突，还能提高代码的可读性和可维护性。在实际开发中，理解并...
vue如何解决循环引用组件报错的问题
10-17
在Vue开发过程中，循环引用组件有时会导致报错，特别是当组件相互依赖，形成循环引用时。Vue框架在处理这种情况时可能会出现"Unknown custom element"的警告，提示组件未正确注册。这个问题通常源于组件实例化顺序与...
Vue中如何实现proxy代理
12-10
Vue 框架开发的时候，会遇到跨域的问题，可在config/index.js 里配置proxyTable内容，使用proxy 代理。 // config/index.js 文件 proxyTable: { '/api': { target: 'http://192.168.149.90:8080/', // 设置你调用的接口域名和端口号 changeOrigin: true, // 跨域 pathRewrite: { '^/api': '/' } } }, 这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口
vue2中使用proxy遇到问题：Uncaught (in promise) Error: Request failed with status code 404
热门推荐
ThisEqualThis的博客
09-20 1万+
遇到问题首先缩小范围确定问题原因。 我用postman调接口有正确的返回值，说明与后台无关；肯定是前端配置问题；报404那有可能是接口问题，查询接口是否正确，嗯？……我查不出来！查询请求头信息，发现请求地址是正确的，这里就触及到了我的知识盲点：pathRewrite的使用 控制台 Request URL: http://localhost:8888/fundq/queryAssetListPa...
vue2利用axios调用后端接口，并配置devServer.proxy实现跨域显示数据；代理后出现404问题
QWY1285236058的博客
10-28 3984
vue2利用axios调用后端接口，并配置devServer.proxy实现跨域显示数据；代理后出现404问题
vue3.0设置代理模式访问404问题
qq_41409623的博客
11-24 1275
vue3.0 设置代理模式 访问404问题 项目根目录下包含config目录的都是2.0的项目,vue3.0需手动在根目录下新建vue.config.js,基础代理代码如下 module.exports = { // 相当于webpack-dev-server，对本地服务器进行配置 devServer: { port: 9520, //本地前端启动端口号 open: true, // 是否启动自动打开浏览器 proxy: { "/qindt"
vue - 详解配置反向代理后，项目出现白屏的情况，js、css文件404问题解决方案（Vue解决项目白屏以及反向代理）
高级前端工程师
12-20 5228
vue 项目配置反向代理导致项目白屏，js、css文件404问题解决方案，Vue项目History模式404问题解决方法，Vue在本地配置反向代理发布后就不生效了原因解释，vue项目配置反向代理，Vue项目启动白屏问题的几种解决办法，vue首页白屏是什么问题引起的?如何解决?，vue 项目配置反向代理导致项目白屏，nginx反向代理二级目录 导致vue项目静态文件css js访问不到，Uncaught TypeError: Cannot set properties of undefined (settin
vue部署到宝塔请求接口报404错误
clf20731的博客
12-20 6123
问题 我将前端vue和后端Spring Boot全部都部署到了宝塔上，后端项目部署成功后直接请求接口成功，运行本地vue项目使用代理服务器访问接口也是成功的，但是部署到vue上的项目访问接口报404错误 解决 经向某位大佬求教后找到了解决办法：需要配置宝塔上的nginx代理才行，解决步骤如下： 点击nginx的设置(如果没有nginx就在同一页面搜索安装即可) 点击配置修改，鼠标滑动到页面最底部，复制红框里这个路径/www/server/panel/vhost/nginx(配置修改这个文件尽可能
vue项目部署到服务器之后，接口出现404，怎么办
hx_long的博客
09-22 8066
如果之前vue项目部署上服务器之后正常运行，而在之后更换域名再部署，就出现接口404的状态的话，有两种情况。 一：有可能是vue中的配置有问题，这个需要去重新设置vue的接口地址配置的问题。 二：nginx中的配置没做好，这个时候就需要进入到服务器查看nginx的站点配置。很有可能是nginx的api代理配置的问题，这时候需要将代理地址更换成当前的vue站点地址就可以了。 ...
解决vue proxy代理配置跨域后404页面问题
Gaozier的博客
04-09 2384
vuecli2中配置文件均在build和config中 vuecli3中的配置文件需自己创建，名为vue.config.js(需要与src同级目录) 问题原因所在 文件名没有严格一致 配置文件中命名应于官方文档一致 网上好多都是dev和proxyTable ...
vue项目axios请求接口，后端代理请求接口404，问题出现在哪？
weixin_30783629的博客
12-14 6236
　　在vue项目中，列表数据需要用到qq音乐接口中的数据，但是直接请求不行，有host及referer限制，需要采用后端代理的方式。借助axios及node的express，在dev-server.js中实现后，重启项目，结果接口404了。代码如下： 　　 　　仔细检查后，代码没问题；于是在apiRouts中console.log()打印信息，运行没有打印信息，意味着根本没有运行这部分代码。于...
vue3配置代理跨域vite中pathRewrite报错
03-28
如果在使用 Vue3 配置代理跨域时在 Vite 中使用 pathRewrite 报错，一般是因为配置有误或者缺少依赖。 以下是一个正确的配置示例： ```javascript // vite.config.js export default { // ... server: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ''), }, }, }, }; ``` 注意事项： 1. `pathRewrite` 应该替换为 `rewrite`； 2. `path.replace()` 中的正则表达式应该以 `/` 开头，例如 `/^\/api/`； 3. `changeOrigin` 选项应该设置为 `true`，以便正确地处理跨域请求的 Origin 头部； 4. 确保安装了 `@vitejs/plugin-proxy` 插件。 如果以上方法仍然无法解决问题，可以检查错误信息并查看文档以获取更多帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值