如何存储 JWT refreshToken cookie 响应

Question

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

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

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

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

更新

我在某处读到问题可能是没有“安全”标志，这是由服务器调试模式引起的。我关掉了，但是cookie还是没有设置。

响应Headers：

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

请求Headers:

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）上设置后端和前端时会遇到此问题。

解法：

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

或

您需要实施一个代理，这样您就可以在 https://rewhite-86006--beta-duoa0dwg.web.app 上请求您的网络应用程序，并且您的网络应用程序会将此代理到您的 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',
            },
        },
    },
}

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

如何存储 JWT refreshToken cookie 响应

How to store a JWT refreshToken cookie response

cookies

jwt

vue.js

graphql

saleor