如何存储 JWT refreshToken cookie 响应

Question

我正在尝试使用 GraphQL 通过 JWT 对用户进行身份验证。登录用户后，我会收到作为 JSON 响应的令牌和存储刷新令牌的 httponly cookie。 （服务端使用的是 Saleor-core）

根据 Saleor 的文档和其他一些博客文章，我假设这个响应 cookie 现在应该存储在浏览器中，并且每当我需要刷新令牌时，cookie-refreshToken 用于验证我的请求。但是，当我在开发工具中将选项卡切换到“应用程序”时，它只是空的。

浏览器收到 cookie 响应后的正常行为是什么？我是否需要一些额外的代码来以某种方式“保存”该响应 cookie？

并没有真正发现其他人有这个问题，所以我认为错误一定是在其他地方。

更新

我在某处读到问题可能是由于服务器调试模式没有“安全”标志。我把它关掉了，但仍然没有设置 cookie。

响应标头：

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

感谢您的帮助！

Answer 1

您 cookie 上的 Domain 属性似乎与您的请求来源不同。您正在发出跨站点请求并从（不同域的）服务器接收 Set Cookie 响应。

通常我们在不同域（例如localhost:3000 和localhost:8080）上运行后端和前端时会遇到这个问题。

解决方案：

1. 如果 cookie 设置了 SameSite=None 和 Secure 属性，则最近的 Chrome 浏览器版本（从 2020 年开始）将仅设置从跨站点请求接收的 cookie。设置Secure 后，cookie 将仅通过 HTTPS 协议发送到服务器（您需要实现 SSL）。
   截至目前，您也没有设置。 SameSite 默认为 Lax 而不是 None。您需要明确设置它。

或

1. 您需要实现一个代理，以便您在 https://rewhite-86006--beta-duoa0dwg.web.app 上请求您的 webapp，您的 webapp 会将其代理到您的 Saleor 引擎域 rewhite-saleor-engine.herokuapp.com。你如何做到这一点取决于你使用什么框架来为你的 webapp 提供服务。您没有在问题中提到它，但我注意到您已将其标记为 vue.js，因此我假设您使用 Vue CLI 来提供 Vue 应用程序。

使用 Vue CLI 设置代理非常简单。只需在根目录中查找 vue.config.js 文件即可。如果它不存在，请创建它并粘贴以下代码：

module.exports = {
    devServer: {
        proxy: {
            '^/graphql': {
                target: 'https://rewhite-saleor-engine.herokuapp.com',
                changeOrigin: true,
                logLevel: 'debug',
            },
        },
    },
}

现在，您应该将请求发送到https://rewhite-86006--beta-duoa0dwg.web.app/graphql，而不是从rewhite-saleor-engine.herokuapp.com/graphql 获取refreshToken，您的Web 应用本地服务器会将请求转发到Heroku 上的Saleor 后端。对于您的浏览器，它看起来好像请求的响应来自 web 应用程序本身，因此它不再是跨站点请求。