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.最後，不相信的同學可以去試試，體驗一下差別。