问题
最近项目对接口进行安全改造,需要用到一个Path=/XXX/的cookie值,但是本地开发环境会出现cookie丢失的问题,因为本地开发环境目录都是http://localhost:8000/home,不会包含XXX路径,这样请求就会丢失用于安全的cookie.
解决方案
最简单粗暴的解决方案
修改项目目录,添加一个XXX的文件夹,把开发环境的需要的静态资源和页面文件放到XXX文件夹下,开发环境下访问项目地址改成http://localhost:8485/XXX。显然这个方案有缺陷,如果cookie path 改变,我们又需要再次改变项目目录结构,可能还需要修改webpack配置(或者其他打包配置)
nginx 代理的方式
如果项目本地开发环境使用了nginx代理,那么只需要一行配置就可以轻松搞定,直接上代码
location /{
...
proxy_pass http://localhost:8000;
proxy_cookie_path /XXX/ /;
...
}
#原理是代理转换了cookie的path,从/XXX/,转换成/。这样项目就不用做任何修改了。
复制代码
webpack-dev-server 解决方案
了解前面两个方案之后,我们来看看重头戏,项目没有使用nginx作为代理,而是使用webpack-dev-server(^2.4.5)提供的代理功能,我们改怎么来配置呢?相信比较熟悉webpack-dev-server的同学都知道webpack-dev-server可以配置proxy,其实就是个代理的配置。先看一下最终的解决方案,在webpack.config.js中配置,如下
devServer:{
proxy: {
"/api": {
target: "http://localhost:8000",
pathRewrite: {
"^/api" : ""}
},
onProxyRes: function(proxyRes, req, res) {
var cookies = proxyRes.headers['set-cookie'];
var cookieRegex = /Path=\/XXX\//i;
//修改cookie Path
if (cookies) {
var newCookie = cookies.map(function(cookie) {
if (cookieRegex.test(cookie)) {
return cookie.replace(cookieRegex, 'Path=/');
}
return cookie;
});
//修改cookie path
delete proxyRes.headers['set-cookie'];
proxyRes.headers['set-cookie'] = newCookie;
}
}
}
}
复制代码
由于查找了很多资料也没有查到简单的配置方式,我使用了onProxyRes的配置进行手动修改cookie。如果其他同学有其他简单一些的方式,还望不吝赐教!
首先,同样是作为代理ÿ