Angular中如何从Response Headers获取set-cookie值及Domain属性报错解决

问题根因说明 #

• Set-Cookie被拦截的核心原因是返回的Set-Cookie头中Domain属性和当前页面的host不匹配，触发了浏览器的Cookie安全校验规则。
• 前端无法读取Set-Cookie响应头是浏览器的原生安全限制：Set-Cookie、Set-Cookie2属于禁止前端脚本访问的响应头，哪怕配置了跨域头的暴露规则也无法被JS读取，所以你拿到的返回值一直是null，和你的代码逻辑无关。

修复方案 #

优先修复Set-Cookie自动写入的问题（推荐） #

搞定这个问题你完全不需要手动读取Set-Cookie，浏览器会自动完成Cookie写入：

1. 核对后端返回的Set-Cookie的Domain值，必须和当前站点域名是同域或者父域：
   例如当前页面跑在order.xxx.com，合法的Domain值可设为order.xxx.com（仅对当前子域名生效）或者xxx.com（对所有*.xxx.com二级域名生效），不允许填写无关域名。
2. 如果是跨域请求场景，需要额外补全三个配置：
   • 后端响应头添加Access-Control-Allow-Credentials: true
   • 前端发请求时开启凭证携带：fetch请求配置credentials: 'include'，axios请求配置withCredentials: true
   • 后端跨域放行的Access-Control-Allow-Origin不能设为通配符*，必须和请求的Origin值完全匹配
3. 额外校验其他Cookie属性：HTTPS站点必须给Cookie加Secure属性，SameSite属性根据你的跨域场景调整，跨域请求下要设置为SameSite=None; Secure才不会被拦截。

确实需要手动获取Cookie值的替代方案 #

如果因为业务需要必须拿到Cookie的值，有两个合法实现方式：

• 后端把需要传递的Cookie值放到自定义响应头中返回，比如X-Custom-Token: 你的值，同时后端配置Access-Control-Expose-Headers: X-Custom-Token，前端即可正常读取这个自定义头的值
• 如果Cookie没有设置HttpOnly属性，等Set-Cookie生效后，直接通过document.cookie读取同域下的所有可访问Cookie即可。

内容的提问来源于stack exchange，提问作者Yisal Khan