Angular使用反向代理調試時改變Cookie的路徑

由於angular在調試時，是使用反向代理的方式訪問後端，那麼就可能出現cookie路徑不同的狀況，導致session無法正常起作用。

例如angular端請求的地址爲http://localhost:4200/api/getName，反向代理到http://localhost:8080/backend/getName，由於端口號後的第一級路徑不同，即"api"與“backend”不同，就出現了cookie路徑不同，session無法記住設置的值。

這時就需要去改寫Cookie的路徑了。在Nginx中關於Cookie路徑改寫的方法很容易搜索到，但是Angular中並沒有找到相關資料。而Vue的這方面資料是能搜到的，Vue和Angular這方面配置是一樣的。

所以要解決很簡單，只需要在反向代理配置文件中(我的是proxy.config.json)，增加"cookiePathRewrite"配置：

 "/api":{
        "target":"http://127.0.0.1:8080/backend",
        "secure": "false",
        "pathRewrite": {
            "^/api": ""
        },
        "changeOrigin": true,
        "cookiePathRewrite": {
            "/backend": "/api"
          }
    }

將兩個路徑添加上去就可以了，但是要注意key和value的順序不能弄反。

不僅是端口號後第一級路徑不同纔會產生cookie路徑不同，第二級、第三級等都會導致同樣的問題。所以一般情況下，最好保證請求URL和後端URL，只有前綴不同，後面路徑相同。

還有種情況，如果請求的URL爲"/api/getName"，對應後端URL爲"/project/backend/getName"，就可以將"/api"和"/project/backend"視爲第一級路徑，進行反向代理，這樣後面的路徑就會一樣了。