vue项目上线nginx服务器时的代理问题

今天就来谈谈vue项目上线nginx服务器时我踩过的坑，希望大家看完可以少走弯路！！！

1.首先，我们在本地开发的时候，假如我们的项目用到别人的接口，但是请求跨域了，那我们就需要使用代理，而在vue的配置文件vue.config.js中，我们写的接口代理有两种模式，如下：

module.exports = {
  devServer: {
    proxy: {
      "/info": {
        target: "https://www.baidu.com",
        changeOrigin: true,
        pathRewrite: {
          "^/info": ""
        }
      }，
      "/info": {
        target: "https://www.baidu.com",
        changeOrigin: true
      }
    }
  }
}

假设我们请求的接口是：https://www.baidu.com/info/xxxx，采用上面两种代理方式的区别

（1）当我们用上面那种模式代理接口的时候，即：

"/info": {
    target: "https://www.baidu.com",
    changeOrigin: true,
    pathRewrite: {
        "^/info": ""
    }
}

此时，我们请求的时候，拼接地址的时候要加上/info，即：/info/info/xxxx，因为这里已经把/info重置为空了，实际的地址还是https://www.baidu.com/info/xxxx，若不加，则变成了https://www.baidu.com/xxxx，已经和真实接口不一样了

（2）当我们用下面那种模式代理接口的时候，即：

"/info": {
    target: "https://www.baidu.com",
    changeOrigin: true
 }

此时，我们请求的时候，后面无需在拼接上/info了，因为这里默认自动把/info拼接到地址上了，即：/info/xxxx => https://www.baidu.com/info/xxxx，这就和真实接口一样了，若写成/info/info/xxxx => https://www.baidu.com/info/info/xxxx，又与真实地址不符了

2.再来看看nginx配置文件nginx.conf的接口代理：

location /info {
    proxy_pass https://www.baidu.com;
}

    因为要上线nginx服务器，使用别人的接口也是需要代理的(除非那种允许所有访问的接口)，代理标识符要和vue项目里面使用的一致。我们从上面可以看出，nginx的只有一种代理模式，这种与上面vue的第二种模式一样，会自动把标识符拼接到代理地址的后面，即：/info/xxxx => https://www.baidu.com/info/xxxx。

    3.从上面看来，我建议在vue本地开发的时候使用第二种代理模式，避免上线后接口不对的情况，不然修改起来的工作量太大了，所以最好一开始就使用第二种，因为这种和nginx的代理模式是一样的，nginx的代理配置参照vue的，一样的配置就可以了，上线后不会出现问题。

    4.最后，不相信的同学可以去试试，体验一下区别。