vuecli3里配置vue.config.js的代理时出现代理不正确

简介: vuecli3里配置vue.config.js的代理时出现代理不正确

问题

最近遇到一个非常低级的问题,一个 post 请求接口报 404,但是排查起来却排查了好久,postman 以及 Swagger 不通过代理去请求的时候是没有问题的,然后通过自己的项目去访问就报错 404,然而这个包的其他接口又可以。突然直接就懵逼了。


具体情况

/ApiBase这个包部署在 9090 的环境,我本地的项目是在 8080 然后,我在项目中用 axios 去访问一个 post 接口 http://127.0.0.1:8080/ApiBase/commonUtils/updateConfig,就报 404,然而http://127.0.0.1:9090/ApiBase/commonUtils/updateConfig是可以的,postman 以及 Swagger 测试都ok。


// 请求代理
devServer: {
  proxy: {
    '/ApiBase': {
      target: 'http://127.0.0.1:9090',
      ws: true,
      changeOrigin: true
    },
    '/common': {
      target: 'http://127.0.0.1:7001',
      ws: true,
      changeOrigin: true
    },
  }
}



排查过程

经过了很长时间的挣扎,在后端大佬的协助下,通过 postman 调用 http://127.0.0.1:8080/ApiBase/commonUtils/updateConfig,在去掉参数,然后调用接口,结果出来时发现 http://127.0.0.1:8080/ApiBase/commonUtils/updateConfig 指向了 http://127.0.0.1:7001,简直了,好家伙,我直接好家伙。


由此推测出代理的配置可能出问题了,应该是不严谨导致匹配到 /common 包去了。


20210325191540102.png


在 cli 脚手架文档里可以看到http-proxy-middleware,里面有更多的配置可以查看


20210325192951715.png




解决


修改配置

// 请求代理
devServer: {
  proxy: {
    '^/ApiBase/': {
      target: 'http://127.0.0.1:9090',
      ws: true,
      changeOrigin: true
    },
    '^/common/': {
      target: 'http://127.0.0.1:7001',
      ws: true,
      changeOrigin: true
    },
  }
}




目录
相关文章
|
1月前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
1月前
|
自然语言处理 JavaScript
vue element plus Config Provider 全局配置
vue element plus Config Provider 全局配置
50 0
|
1月前
|
前端开发 测试技术
测Nuxt.js入坑,配置dev、test、pro三种环境的变量env
先下载一个cross-env模块,比较好控制环境
32 5
|
8天前
|
存储 消息中间件 Java
Java一分钟之-Spring Cloud Config:外部化配置
【6月更文挑战第8天】Spring Cloud Config提供外部化配置,通过Config Server管理和版本控制微服务配置。本文涵盖Config Server与Client的配置、常见错误、多环境配置、实时更新及使用示例。注意配置服务器URL、环境变量设置、Bus配置以及安全问题。使用Config能提升系统灵活性和可维护性,但要留意日志以确保配置正确和安全。
88 10
|
9天前
|
Web App开发 JavaScript
使用CRXjs、Vite、Vue 开发 Chrome 多页面插件,手动配置 vite.config.ts 和 manifest.json 文件
使用CRXjs、Vite、Vue 开发 Chrome 多页面插件,手动配置 vite.config.ts 和 manifest.json 文件
15 0
|
29天前
|
移动开发 前端开发 JavaScript
Vue2 系列:vue.config.js 参数配置
Vue2 系列:vue.config.js 参数配置
29 2
|
1月前
|
Web App开发 前端开发 JavaScript
在 Chrome 开发者工具里配置哪些类型的 JavaScript 文件应该被调试器忽略
在 Chrome 开发者工具里配置哪些类型的 JavaScript 文件应该被调试器忽略
16 0
|
1月前
|
前端开发 API
nuxt.config.js 配置
我们在使用Nuxt.js提供的create-nuxt-app 创建项目后,更希望对它自定义一些东西,这里我们可以在根目录下找到nuxt.config.js
30 7
|
1月前
|
缓存 负载均衡 JavaScript
vue3中正向代理与反向代理
vue3中正向代理与反向代理
16 1
|
1月前
|
开发框架 JSON .NET
.Net4.0 Web.config 配置实践
.Net4.0 Web.config 配置实践