Cookie的跨域问题

小小Cookie，大大能量

cookie，这个仅有4kb的小曲奇也是有大体量。朋友的项目遇到了问题，原因是在线上环境设置cookie发送请求，请求头中的Cookie属性带着所设置的cookie，但是在本地调试的时候却发现并不携带。

什么是cookie

详情请看这里

cookie属性

属性名	描述
name	Cookie的名称，Cookie一旦创建，名称便不可更改
value	Cookie的值，如果值为Unicode字符，需要为字符编码。如果为二进制数据，则需要使用BASE64编码
maxAge	Cookie失效的时间，单位秒。如果为整数，则该Cookie在maxAge秒后失效。如果为负数，该Cookie为临时Cookie，关闭浏览器即失效，浏览器也不会以任何形式保存该Cookie。如果为0，表示删除该Cookie。默认为-1。
secure	该Cookie是否仅被使用安全协议传输。安全协议。安全协议有HTTPS，SSL等，在网络上传输数据之前先将数据加密。默认为false。
path	Cookie的使用路径。如果设置为“/sessionWeb/”，则只有contextPath为“/sessionWeb”的程序可以访问该Cookie。如果设置为“/”，则本域名下contextPath都可以访问该Cookie。注意最后一个字符必须为“/”。
domain	可以访问该Cookie的域名。如果设置为“.google.com”，则所有以“google.com”结尾的域名都可以访问该Cookie。注意第一个字符必须为“.”。
comment	该Cookie的用处说明，浏览器显示Cookie信息的时候显示该说明。
version	Cookie使用的版本号。0表示遵循Netscape的Cookie规范，1表示遵循W3C的RFC 2109规范

所以你想设置cookie可以这样设置

//打开浏览器控制台，输入以下代码回车
document.cookie = "test=123;path=/;domain=blog.csdn.net"
//这样按住F12打开控制台，在Application的Cookies里面你就会找到刚才设置的属性

Cookie的Domain

刚才我们设置了test=123，我们会发现他的Domain是.blog.csdn.net，然后现在切换到其他网页(如百度)，再次打开控制台的Application之后会发现，我去竟然没有了。于是你会联想到cookie是不是也有跨域的问题?

答案是肯定的，而造成这一影响的原因之一是Domain

前端开发时，在登录页面发送请求，后端收到请求之后在set-cookie中设置cookie信息，其中就包括了Domain。如果前端在发送其他请求时，打开携带cookie的配置(如axios的axios.defaults.withCredentials= true)则会带上跟后端同域名的cookie

下表为set-cookie的属性

name=value	赋予 Cookie 的名称和其值（必需项）
expires=DATE	Cookie 的有效期（若不明确指定则默认为浏览器关闭前为止）
path=PATH	将服务器上的文件目录作为Cookie的适用对象（若不指定则默 认为文档所在的文件目录）
domain=域名	作为 Cookie 适用对象的域名 （若不指定则默认为创建 Cookie 的服务器的域名）
Secure	仅在 HTTPS 安全通信时才会发送 Cookie
HttpOnly	加以限制， 使 Cookie 不能被 JavaScript 脚本访问

以上解释了为什么盆友的项目在线上设置cookie发送请求携带，而在本地开发不携带cookie的原因（线上设置的cookie的domain与后端同名，本地设置的则为localhost）

刚才说原因之一，那其他的呢？拿一个post请求来说，http://aaa.www.com/xxxxx/list

如果满足下面几个条件才会携带cookie：

1. 浏览器端某个Cookie的domain字段等于aaa.www.com或者www.com。

2. 都是http或者https，或者不同的情况下Secure属性为false。

3. 要发送请求的路径，即上面的xxxxx跟浏览器端Cookie的path属性必须一致，或者是浏览器端Cookie的path的子目录，比如浏览器端Cookie的path为/test，那么xxxxxxx必须为/test或者/test/xxxx等子目录。

其他

• 大家看见那个在Application的Domain的域名会被加.这是强制加的。

• 为什么我朋友不能通过设置cookie来携带cookie

  • 如果只设置cookie，domain默认为当前域名。
  • 如果设置了domian，因为本地启动的是localhost所以domain设置他们后端的域名会写入不成功。

  写入cookie方法

  function setCookie(name, value, day, path, domain)
  {
  	day = day || 30;
  	path = path || '/';
  	var str = name + '=' + value + '; ';
  	if(day) str += 'expires=' + new Date(Date.now() + day * 24 * 3600 * 1000).toGMTString() + '; ';
  	if(path) str += 'path=' + path + '; ';
  	if(domain) str += 'domain=' + domain;
  	document.cookie = str;
  },
  

  当前域名为：blog.xiaoming.com 执行以下代码

  xei.setCookie('test1', 'abcd', 30, '/'); // 成功，默认写入当前域名
  xei.setCookie('test2', 'abcd', 30, '/', 'blog.xiaoming.com'); // 成功，前面追加一个“.”
  xei.setCookie('test3', 'abcd', 30, '/', 'abcd.xiaoming.com'); // 写入不成功
  xei.setCookie('test4', 'abcd', 30, '/', '.xiaoming.com'); // 成功
  xei.setCookie('test5', 'abcd', 30, '/', 'xiaoming.com'); // 成功，前面追加一个“.”
  xei.setCookie('test6', 'abcd', 30, '/', 'www.qq.com'); // 写入不成功
  

  • 不传domain，默认当前域名；
  • 只要传了domain，则会强制在前面加上一个.，不管是一级还是二级域名；
  • domain只能“小于等于”当前域名，否则写入不成功；

参考文献

• 关于前后端写入Cookie时domain的一个问题
• cookie的domain属性