JS Cookie丢失问题

Posted 2020-10-26 hongsusu

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]

　　　　　　}

 

　　　　}

　　}