Response Headers 的 Set-Cookie 前端读取不到 ?

问题

描述

先看下后台返回的Set-Cookie字段：

查看浏览器Cookies：

思路

发现只有JESSIONID存入到了浏览器Storage中的Cookies。通过比较 Response Headers 中两个 set-cookie字段可以发现字段不同：

• JSESSIONID：path=/
• ZTEV-JWT-Token：Max-Age=1800; Expires=Wed, 26-Jun-2019 02:49:55 GMT

解决

让后台设置 ZTEV-JWT-Token 的时候也添加一个 path=/ 字段。

延伸

其他原因

我上面遇到的这个问题是因为后端没有设置path。当然还有一些其他的原因也会导致浏览器访问不到cookie，例如：设置了http-only、domain不匹配。

Set-Cookie指令

<cookie-name>=<cookie-value>

名称/值的形式。

• cookie-name 可以是除了控制字符 (CTLs)、空格 (spaces) 或制表符 (tab)之外的任何 US-ASCII 字符。同时不能包含以下分隔字符： ( ) < > @ , ; : " / [ ] ? = { }.
• cookie-name 是可选的，如果存在的话，那么需要包含在双引号里面。支持除了控制字符（CTLs）、空格（whitespace）、双引号（double quotes）、逗号（comma）、分号（semicolon）以及反斜线（backslash）之外的任意 US-ASCII 字符。关于编码：许多应用会对 cookie 值按照URL编码（URL encoding）规则进行编码，但是按照 RFC 规范，这不是必须的。不过满足规范中对于 <cookie-value> 所允许使用的字符的要求是有用的。
• __Secure- 前缀 以 __Secure- 为前缀的 cookie（其中连接符是前缀的一部分），必须与 secure 属性一同设置，同时必须应用于安全页面（即使用 HTTPS 访问的页面）。
• __Host- 前缀 以 __Host- 为前缀的 cookie，必须与 secure 属性一同设置，必须应用于安全页面（即使用 HTTPS 访问的页面），必须不能设置 domain 属性 （也就不会发送给子域），同时 path 属性的值必须为“/”。

Expires=<date> | 可选

cookie 的最长有效时间，格林尼治标准时间。如果不传表示这是一个会话期 cookie。

Max-Age=<non-zero-digit> | 可选

cookie 的最长有效时间，单位是秒。Max-Age优先级高于Expires。

Domain=<domain-value> | 可选

cookie 可以送达的主机名。默认值为当前文档访问地址的主机名（不包含子域名）。如果设置了该参数，则其子域也包含在内。

Path =<path-value> | 可选

cookie 可以送达的路径。设置的目录及其子目录都生效。

Secure | 可选

一个带有安全属性的 cookie 只有在请求使用SSL和HTTPS协议的时候才会被发送到服务器。

HttpOnly | 可选

设置了 HttpOnly 属性的 cookie 不能使用 JavaScript 经由 Document.cookie 属性、XMLHttpRequest 和 Request APIs 进行访问以防范跨站脚本攻击（XSS）。

SameSite=Strict 和 SameSite=Lax | 可选

允许服务器设定一则 cookie 不随着跨域请求一起发送，这样可以在一定程度上防范跨站请求伪造攻击（CSRF）。

参考

MDN Web文档