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
    },
  }
}




目录
相关文章
|
4月前
|
JavaScript
Nest.js 实战 (十一):配置热重载 HMR 给服务提提速
这篇文章介绍了Nest.js服务在应用程序引导过程中,TypeScript编译对效率的影响,以及如何通过使用webpackHMR来降低应用实例化的时间。文章包含具体教程,指导读者如何在项目中安装依赖包,并在根目录下新增webpack配置文件webpack-hmr.config.js来调整HMR相关的配置。最后,文章总结了如何通过自定义webpack配置来更好地控制HMR行为。
120 6
|
4月前
|
算法 安全 Java
微服务(四)-config配置中心的配置加解密
微服务(四)-config配置中心的配置加解密
|
2月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
664 4
|
3月前
|
缓存 JavaScript 测试技术
Vue 代理设置
【10月更文挑战第14天】Vue 代理设置是 Vue 项目开发中非常重要的一个环节。通过合理的代理设置,我们可以解决跨域问题,提高开发效率和用户体验。
47 1
|
3月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
244 0
|
5月前
|
移动开发 JavaScript 前端开发
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
这篇文章介绍了在UniApp H5项目中处理跨域问题的两种方法:通过修改manifest.json文件配置h5设置,或在项目根目录创建vue.config.js文件进行代理配置,并提供了具体的配置代码示例。
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
|
4月前
|
JavaScript
Vue3基础(19)___vite.config.js中配置路径别名
本文介绍了如何在Vue 3的Vite配置文件`vite.config.js`中设置路径别名,以及如何在页面中使用这些别名导入模块。
175 0
Vue3基础(19)___vite.config.js中配置路径别名
|
3月前
|
前端开发 JavaScript
vite vue3 config配置
【10月更文挑战第5天】
163 0
|
5月前
|
JSON 前端开发 JavaScript
vue.config.js配置详解
【8月更文挑战第16天】vue.config.js配置详解
230 1
vue.config.js配置详解
|
4月前
|
JavaScript
vue学习(8)数据代理
vue学习(8)数据代理
49 1