技术编程前后端分离时cookie写入的问题你遇到过吗 |

前端在单页面开发中，通常会采用proxy代理的方式进行后台服务的转发，部署到nginx服务器，此时不做其他配置的情况下，如果项目用到cookie,可能会出现cookie写入失败的问题。
仔细查看set-cookie的值时发现其中包括Path:/XXX/XXX的键值，一般/XXX/XXX为后台项目名，它意味着你的前端项目需运行在这个目录下cookie才能写入成功。
当然我们自己按照名称创建/XXX/XXX的目录，再把项目放入其中可以解决此问题，但未免太粗暴，如果Path的值改变，我们又需要再次改变项目目录结构。 nginx 代理的方式
如果项目生产环境使用了nginx代理，那么只需要一行配置就可以轻松搞定，直接上代码

本文插图
nginx配置
原理是代理转换了cookie的path ，从/aaa ，转换成/ 。这样项目就不用做任何修改了。 webpack-dev-server 解决方案
了解前面两个方案之后，我们来看看重头戏，项目本地开发时使用webpack-dev-server（^2.4.5）提供的代理功能，我们该怎么来配置呢？相信比较熟悉webpack-dev-server的同学都知道webpack-dev-server可以配置proxy ，其实就是个代理的配置。先看一下最终的解决方案，在webpack.config.js中配置，如下

本文插图
proxy配置
使用onProxyRes的配置进行手动修改cookie 。如果其他同学有其他简单一些的方式，还望不吝赐教！
同样是作为代理，思路就是参照nignx的思路一样，对cookie 的path进行一个转化，这样思路就明确了，查找配置，转换cookie 。
onProxyRes会对response进行拦截，如果response-header中包含set-cookie,会根据正则匹配并通过replace方法替换成/ ，也就是根路径，删掉之前的cookie并重新写入。更简洁的方式
最新的webpack-dev-server3.1.5已经支持配置cookiePathRewrite,依赖于http-proxy的更新，所以现在修改cookie的path更简单了。

本文插图
【技术编程前后端分离时cookie写入的问题你遇到过吗】如果有其他方式或问题，欢迎评论区沟通~~