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"视为第一级路径，进行反向代理，这样后面的路径就会一样了。