题目
近来项目对接口举行平安革新,须要用到一个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丧失的题目。
参考：
