[设为首页] [加入收藏]

正定县生活网

您现在的位置:主页 > 军事新闻 >

前后端分离时cookie写入的问题你遇到过吗_科技频道_东

[时间:2020-08-05 03:12来源:未知作者:admin浏览:]

前端在单页面开发中,通常会采用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更简单了。

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

网站首页科技前沿娱乐新闻体育新闻热透新闻健康新闻汽车资讯旅游新闻历史咨询法律在线社会新闻社会文化星声星语金融新闻军事新闻教育新闻大咖名流财经资讯女性生活时尚新闻

Power by DedeCms