Angular使用反向代理调试时改变Cookie的路径

程墨竹
2023-12-01

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

 类似资料: