如何在 React 中将 JWT 发送到后端？

Posted 2023-03-10

【中文标题】如何在 React 中将 JWT 发送到后端？

【英文标题】：How to send JWT to backend in React?

【发布时间】：2021-12-20 14:22:29

【问题描述】：

我觉得这应该很容易，但我不明白。

我的 React (Next.js) 应用程序使用 NextAuth.js 从 OAuth 提供者获取 JWT 令牌。现在我需要在执行 GraphQL 查询时将此 JWT 发送到我的后端，为此我使用 graphql-request。

但是如何在我的 GraphQL 查询中包含 JWT？我可以在我的请求中设置标头 Authorization: Bearer $TOKEN，但是，JWT 设置为 httpOnly cookie，使其对我的 react 应用程序不可用。

我可以更改设置，使 cookie 不是 httpOnly，但那样会不安全 我可以通过 NextAuth.js 回调获取 JWT 并将其存储在应用程序的状态中，但这似乎也不安全

我觉得应该有一种方法可以让浏览器将 cookie 添加到我的请求中。那可能吗？这个一般是怎么解决的？

更新 1

浏览器不会自动发送cookies：

POST /graphql HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length: 172
sec-ch-ua: "Google Chrome";v="95", "Chromium";v="95", ";Not A Brand";v="99"
accept: application/json
content-type: application/json
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/95.0.4638.69 Safari/537.36
sec-ch-ua-platform: "Windows"
Origin: http://localhost:3000
Sec-Fetch-Site: same-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: http://localhost:3000/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,de;q=0.8,fr;q=0.7

请注意，我的 webapp 在端口 3000 上运行，而 GraphQL 在 8080 上运行。据我所知，Cookie 不是特定于端口的，当我打开 https://localhost:8080 时，我确实看到了 http://localhost:3000 Chrome 的开发者控制台中的 cookie。

【参考方案1】：

浏览器会自动发送带有请求的cookie。

【讨论】：

显然不是这样，请参阅更新后的问题

【参考方案2】：

好的，所以我必须像这样设置credentials: "include"：

new GraphQLClient(ENDPOINT, 
  headers: accept: "application/json",
  credentials: "include"
)

然后，我点击CORS Not Supporting Credentials，要求我在服务器端明确配置允许的来源。