Vue项目配置代理，访问404

配置简介

devServer.proxy  Type: string | Object
如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。或想隐藏真实接口地址可以配置这个参数。
1. 直接配置一个字符串
 devServer: {
    proxy: 'http://localhost:4000' //这样配置后所有请求会转到4000上，但在控制台看到的仍是8080
  }
2. 也可以是一个对象格式
devServer: {
    proxy: {
      "/api": { //这里是地址前缀，所有/api/XXX的请求会进入此配置
        target: "http://localhost:4000", //真实的地址
                ws: true,        //如果要代理 websockets，配置这个参数
        secure: false,  // 如果是https接口，需要配置这个参数
        changeOrigin: true,  //是否跨域
        pathRewrite: { "^/api": "" },  // 重写地址，会将/api重写成别的字符。
      }
    }
  }

访问404的可能原因

1. 上面proxy配置了多个规则，没有匹配到指定的规则里，可尝试只保留一个测试
2. 上面pathRewrite配置有误，注意第一个参数是正则匹配的。
3. NODE_ENV 错误，vue编译有3种模式，开发环境：development，编译生产：production，单元测试：test。在项目中经常使用环境变量，可能配置错误导致规则不生效。

   const service = axios.create({
   baseURL: process.env.APIPROXY,
   timeout: 5000,
   });

4. 本地正常部署到服务器环境报错。这种情况很少有注意到，其实原因是本地通过node实现代理转发，线上环境多用nginx，所以在nginx的conf中也要设置相应代理规则，下面是简单得例子：

   server {
       location /api {
                               rewrite  ^.+api/?(.*)$ /$1 break;
                               include  uwsgi_params;
                               proxy_pass   http://api.abc.com:8090; #后端服务地址
                               add_header Access-Control-Allow-Origin *;
                               add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
                               add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,token';
   
                    }
            }

配置详解

更多配置详解可查阅文档：VueCli