ruoyi-ui配置多个域名，在开发环境调用服务器接口地址问题，配置后接口一直为404问题？

Question

ruoyi-ui vue2.x版本 想要在前端配置多个跨域配置，后端的接口能正常请求，前端配置一直显示路径404.

1. 在 .env.development 和 .env.production 新增 VUE_APP_OTHER_API='/proxy-api'
   

2. vue.config.js 中的 devServer 配置

   [process.env.VUE_APP_OTHER_API]: {
        target: "http://47.99.xx.xx:8083",
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_OTHER_API]: "",
        },
      },

   如果此新增跨域 target 配置添加 /proxy-api 重启项目就马上显示系统接口异常

3. 新建 requestNew.js 文件（参照原有的 request.js 进行）仅修改 baseURL 地址
   
4. 在api文件下新建js
   

重新运行项目，打开后请求路径为
http://localhost/proxy-api/getTFPara?cityname=yl

---

现在线上接口地址为 http://47.99.xx.xx:8083 Nginx中配置的端口是 8111。我在本地调用线上路径时只有将 process.env.VUE_APP_BASE_API 里的 target 改为 http://47.99.xx.xx:8111/prod-api ，.env.development 文件需调整为 VUE_APP_BASE_API = '/' 才能登陆 。

而新增的 /proxy-api 在服务器上已配置接口 在 postman 中 http://47.99.xx.xx:8111/proxy-api 能正常请求 。但此时将 vue.config.js 中 process.env.VUE_APP_OTHER_API 的target 配置为 http://47.99.xx.xx:8111/proxy-api，.env.development 文件里修改为 VUE_APP_OTHER_API='/' 启动后马上显示系统接口异常。

process.env.VUE_APP_OTHER_API 里的 target 不使用 api 后缀 改为端口正常地址，.env.development 文件里修改为 VUE_APP_OTHER_API='/proxy-api' 在请求接口时则会报404错误error: "Not Found"path: "/proxy-api/getTFPara"

Answer 1

问题描述的有点多，稍微整理了一下内容排版，但是依旧混乱。主要是之后一段的描述。

看情况你们是有在 Nginx 中有配置 /proxy-api 的代理转发，所以你在前端项目配置代理的时候通过 pathRewrite 去掉了 /proxy-api 导致Nginx转发的时候没有命中，所以请求尝试的是前端项目，并不是API的代理转发。就会出现404的情况。

所以得看你们具体情况去做处理。比如说已经由Nginx转发了，就统一由Nginx来处理，Nginx配置中新增一个 /proxy-api/v2 的转发就好了。然后前端请求新API的时候，默认的API前缀就从 /proxy-api 调整成 /proxy-api/v2

如果不通过NG转发，那么前端就直接代理到后端的接口地址上面，而不是原来NG的代理转发请求。

---

总的来说，postman请求后端接口没问题，前端代理出现404的情况：

1. 本地的 devServer.proxy 配置有问题，发起请求的时候，请求的接口URL就是错误的，没有正确被本地代理捕获转发。
2. 本地的 devServer.proxy 配置有问题，pathRewrite 的时候把接口 URL 改写为了错误的URL，导致后端/Nginx转发的时候没有命中。