如何存储JWT refreshToken响应Cookie？Saleor跨域Cookie未设置问题

问题排查与解决 #

基础问题解答 #

1. 浏览器Set-Cookie默认行为：只要响应头的Set-Cookie属性符合当前上下文的安全规则，浏览器会自动存储Cookie，全程不需要前端手动操作。
2. 是否需要手动存Cookie：不需要，尤其是你用到的refreshToken是HttpOnly类型，前端JS本身没有读写权限，不可能手动存储。

你当前场景的问题根因排查 #

你的前端部署域为https://rewhite-86006--beta-duoa0dwg.web.app，后端部署域为rewhite-saleor-engine.herokuapp.com，属于完全跨站的第三方Cookie场景，需要按以下顺序检查配置：

• 前端请求必须开启凭证配置：不管你用fetch还是axios发起跨域请求，必须手动开启携带凭证的配置，否则浏览器会直接忽略响应返回的Set-Cookie：

  // fetch 配置示例
  fetch('https://rewhite-saleor-engine.herokuapp.com/graphql/', {
    method: 'POST',
    credentials: 'include', // 必须加这行
    body: JSON.stringify(/* 你的GraphQL请求参数 */)
  })
  
  // axios 配置示例
  axios.post('https://rewhite-saleor-engine.herokuapp.com/graphql/', {/* 参数 */}, {
    withCredentials: true // 必须加这行
  })
  

• 服务端Cookie必须添加SameSite=None属性：你当前返回的Set-Cookie没有配置SameSite字段，Chrome等现代浏览器对跨站场景的Cookie默认会应用SameSite=Lax规则，直接阻止存储。需要在Saleor服务端的JWT Cookie配置中，给refreshToken追加SameSite=None属性，该属性必须搭配已有的Secure属性使用，你当前已经配置了Secure，符合要求。
• 检查浏览器第三方Cookie拦截规则：现在主流浏览器的隐私保护功能默认会阻止第三方Cookie存储，你可以临时在浏览器设置中放开对应站点的第三方Cookie限制测试验证。如果确认是该问题，长期最优解决方案是将前后端部署在同根域名下（例如前端用yourdomain.com，后端用api.yourdomain.com），变为同站场景即可规避该限制。

附请求/响应头信息 #

响应头

HTTP/1.1 200 OK
Connection: keep-alive
Date: Thu, 23 Sep 2021 13:32:33 GMT
Server: uvicorn
Content-Type: application/json
Access-Control-Allow-Origin: https://rewhite-86006--beta-duoa0dwg.web.app
Access-Control-Allow-Methods: POST, OPTIONS
Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization, Authorization-Bearer
Access-Control-Allow-Credentials: true
Content-Length: 912
X-Content-Type-Options: nosniff
Referrer-Policy: same-origin
Set-Cookie: refreshToken=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE2MzI0MDM5NTQsIm93bmVyIjoic2FsZW9yIiwiZXhwIjoxNjM0OTk1OTU0LCJ0b2tlbiI6Ijd2b0VmMm1DNlZZSyIsImVtYWlsIjoiSnVsaWFuLkZpbmtlQGdtYWlsLmNvbSIsInR5cGUiOiJyZWZyZXNoIiwidXNlcl9pZCI6IlZYTmxjam8zTmc9PSIsImlzX3N0YWZmIjpmYWxzZSwiY3NyZlRva2VuIjoiWm55ek9xVG9rOU9GYXlDZXY0cjFxMUxnaktnTXRRR0VNUVJEalR1eTJDZ1IyOW1GSVBxQ1B1T1hZcTFQNk92cyJ9.Cl6PmoLkO9Hlh36tDOuyNLQCib4FVBwn32hhnmd7Q4E; expires=Sat, 23 Oct 2021 13:32:34 GMT; HttpOnly; Max-Age=2592000; Path=/; Secure
Via: 1.1 vegur

请求头

POST /graphql/ HTTP/1.1
Host: rewhite-saleor-engine.herokuapp.com
Connection: keep-alive
Content-Length: 318
Pragma: no-cache
Cache-Control: no-cache
sec-ch-ua: "Google Chrome";v="93", " Not;A Brand";v="99", "Chromium";v="93"
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36
sec-ch-ua-platform: "macOS"
content-type: application/json
Accept: */*
Origin: https://rewhite-86006--beta-duoa0dwg.web.app
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: https://rewhite-86006--beta-duoa0dwg.web.app/
Accept-Encoding: gzip, deflate, br
Accept-Language: de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7

附截图 #

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