webpack 反向代理出现404

vue.config.js

devServer: {
   host: "localhost",
   port: 8080, // 端口号
   https: false, // https:{type:Boolean}
   open: true, //配置自动启动浏览器
  // proxy: 'http://10.0.0.0' // 配置跨域处理,只有一个代理，写上域名就可，不需要写端口，端口在port中配置

   // 配置多个代理
    proxy: {
        "/api": {
              target: "http://10.2.0.1:80", // 要访问的接口域名+端口
              ws: true, // 是否启用websockets
               changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
               pathRewrite: {
                    '^/api': '' 
                }
            }
       "/foo": { 
            // target: "<other_url>"
       // }
   }
}       

单个的配置没有什么太大问题

主要是使用配置多个代理的时候，和后端本地调试，没有问题，

放在了测试环境，接口报404，然而直接请求地址没问题，telnet后端地址也是通的

问题：测试环境的接口不知道怎么设置网关什么的，总之就是后端接口也有一个前缀/api，而我恰恰也使用了api进行代理

解决1：既然这样，我把api换成foo不就可以了，结果是 依然不行

继续解决：搜索 pathRewrite 的作用 传送门     https://blog.csdn.net/a460550542/article/details/84999036

解决：将pathRewrite整个对象删除，不进行重写，

问题解决

还是不了解webpack，解决了我也不知道为啥不用和后端一样的前缀了，依然还是不行

如果有大佬知道，烦请指点

     

标签：pathRewrite,代理,404,webpack,api,反向,https,true,服务端
来源： https://www.cnblogs.com/fyjz/p/14331378.html