江苏龙网

  1. 首页 > 资讯 > 科技 > >

Array|前后端分离时cookie写入的问题你遇到过吗

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

文章图片

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

文章图片

【Array|前后端分离时cookie写入的问题你遇到过吗】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更简单了 。
Array|前后端分离时cookie写入的问题你遇到过吗
文章图片

文章图片

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


    推荐阅读


    上一篇：Array|最良心的三款千元机皇，全都是低价高配，用上三五年无压力！

    下一篇：Array,Array|谁说5G手机很难买？内行人都在用的3款机型，高配低价适合学生党