前端在单页面开发中，通常会采用proxy代理的方式进行后台服务的转发，部署到nginx服务器，此时不做其他配置的情况下，如果项目用到cookie,可能会出现cookie写入失败的问题。

仔细查看set-cookie的值时发现其中包括Path:/XXX/XXX的键值，一般/XXX/XXX为后台项目名，它意味着你的前端项目需运行在这个目录下cookie才能写入成功。

当然我们自己按照名称创建/XXX/XXX的目录，再把项目放入其中可以解决此问题，但未免太粗暴，如果Path的值改变，我们又需要再次改变项目目录结构。

nginx 代理的方式

如果项目生产环境使用了nginx代理，那么只需要一行配置就可以轻松搞定，直接上代码

原理是代理转换了cookie的path，从/aaa，转换成/。这样项目就不用做任何修改了。

webpack-dev-server 解决方案

了解前面两个方案之后，我们来看看重头戏，项目本地开发时使用webpack-dev-server（^2.4.5）提供的代理功能，我们该怎么来配置呢？相信比较熟悉webpack-dev-server的同学都知道webpack-dev-server可以配置proxy，其实就是个代理的配置。先看一下最终的解决方案，在webpack.config.js中配置，如下

使用onProxyRes的配置进行手动修改cookie。如果其他同学有其他简单一些的方式，还望不吝赐教！

同样是作为代理，思路就是参照nignx的思路一样，对cookie 的path进行一个转化，这样思路就明确了，查找配置，转换cookie。

onProxyRes会对response进行拦截，如果response-header中包含set-cookie,会根据正则匹配并通过replace方法替换成/，也就是根路径，删掉之前的cookie并重新写入。

更简洁的方式

最新的webpack-dev-server3.1.5已经支持配置cookiePathRewrite,依赖于http-proxy的更新，所以现在修改cookie的path更简单了。

如果有其他方式或问题，欢迎评论区沟通~~