题目
近来项目对接口举行平安革新,须要用到一个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供应的代办功用,我们改怎样来设置呢?置信比较熟习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。假如其他同砚有其他简朴一些的体式格局,还望不吝赐教!
起首,同样是作为代办,我的思绪就是参照nignx的思绪一样,对cookie 的path举行一个转化,如许思绪就明白了,查找设置,转换cookie,我觉得已离成功很近啦。
果真我照样太年青啊,认为剩下的事变一定so easy了,效果我看了好几遍官网文档中proxy设置项,一个一个地检察,压根找不到那一项设置能够修正cookie 的path;然后我最先追求百度,google的协助,就如许查了半天,密密层层的浏览器标签,泪崩,难道真没办法了?照样大神们从来不这么玩啊。。。
以后看到官网有一句话“The dev-server makes use of the powerful http-proxy-middleware package. Checkout its documentation for more advanced usages.”,恍然大悟啊,本来更高等的运用体式格局能够去检察http-proxy-middleware,完全的设置人人能够自行检察和进修
此处仅仅引见几个设置
- cookieDomainRewrite
这个设置能够重写cookie 的domain,当看到这个设置时,眼睛都亮了,按理说也该有个cookiePathRewrite,我确认了好几遍,确切没有。
- onProxyReq
代办要求事宜,能够在这里对要求修正。 - onProxyRes
代办响应事宜,能够在这里修正响应。
function onProxyRes(proxyRes, req, res) {
proxyRes.headers['x-added'] = 'foobar'; // add new header to response
delete proxyRes.headers['x-removed']; // remove header from response
}
重点来了,看到github上的这段demo,思绪就有了,应用这个事宜回调我们能够对set-cookie响应头举行重写,替代Path值。再贴一遍代码:
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;
}
}
此处运用了proxyRes对象举行操纵,遍历proxyRes.headers[‘set-cookie’],替代响应的Path值,删除本来的set-cookie,再从新设置一遍即可。
至此,我们能够在webpack-dev-server的proxy中来举行设置,处理开辟环境下cookie丧失的题目。
参考: