JS Cookie丢失问题
前些天有人问我vue中使用proxy发送请求，为什么请求时cookie丢失，首先说一下我对cookie的理解：
1、cookie在正常情况下是会在每次请求时自动携带，
2、cookie虽然是由一个网页所创建，但并不只是创建cookie的网页才能读取该cookie。
在默认情况下，与创建cookie的网页在同一目录或子目录下的所有网页都可以读取该cookie。即:
(1)如果在这个目录下还有子目录，要使在子目录中也可以访问，则需要使用path参数设置cookie，语法如下：
document.cookie="name=value; path=cookiePath";
(2)如果要使cookie在整个网站下可用，可以将cookieDir指定为根目录，示例如下：
document.cookie="userId=320; path=/";上面所说都指的是在同一个目录中的访问，可是要想在不同虚拟目录中访问则要另外想办法来解决这个问题。
设置路径代码如下：
var now=new Date()
new Date().setDate(now.getDate()+1);
var cookies="setCookies="+escape("我的cookies")+";expires="+now.toString()+";path=/";
注意:path不能解决在不同域中访问cookie的问题。
(3) 在默认情况下，只有和设置cookie的网页在同一个Web服务器的网页才能访问该网页创建的cookie。
但可以通过domain参数来实现对其 的控制，其语法格式如下：
document.cookie="name=value; domain=cookieDomain";
设置域代码如下：
var now=new Date()
new Date().setDate(now.getDate()+1);var cookies="userName="+escape("哈哈")+";expires="+now.toString()+";path=/; domain=.baidu.com"; 看完上面的叙述我们回到上面的疑问，不难理解vue中使用proxy时cookie丢失的原因就是path和domain,
如果后台返回cookie的path是‘/b‘而本地前端本地开发地址为localhost:8080/#/home 页面，我们需要再后端返回cookie时手动修改path路径，代码如下：
proxyTable: {
‘/api‘:{
target: ‘后台接口地址‘,
changeOrigin: true,
pathRewrite: {
‘^/api‘: ‘/b‘,//注意这里只是接口关键字的替换，与cookie的path无关
},
onProxyRes(proxyRes, req, res) {
var oldCookie = proxyRes.headers[‘set-cookie‘]
if(oldCookie== null || oldCookie.length==0){
delete proxyRes.headers[‘set-cookie‘]
return
}
var oldCookieItems = oldCookie[0].split(‘;‘)
var newCookie = ‘‘
for(var i=0; i < oldCookieItems.length; ++i){
if(newCookie.length >0)
newCookie += ‘;‘
if(oldCookieItems[i].indexOf(‘Path=‘) >= 0)
newCookie += ‘Path=/‘
else
newCookie += oldCookieItems[i]
}
proxyRes.headers[‘set-cookie‘] = [newCookie]
}
}
}
