如何在 httpOnly cookie 中使用 JWT 令牌来调用受限 API 端点答案

【问题标题】：How to use a JWT token inside an httpOnly cookie to call a restricted api endpoint如何在 httpOnly cookie 中使用 JWT 令牌来调用受限 API 端点
【发布时间】：2021-12-24 06:03:54
【问题描述】：

我正在使用next.js 和next-auth 针对 API 登录用户。如果登录成功，浏览器会设置一个 httpOnly cookie。 cookie 名称是__Secure-next-auth.session-token，这是值（不用担心是假数据）：

eyJhbGciOiJIUzUxMiJ9.eyJ0b2tlbiI6ImV5SjBlWEFpT2lKS1YxUWlMQ0poYkdjaU9pSlNVekkxTmlKOS5leUpwWVhRaU9qRTJNelkyTXprMk5EY3NJbVY0Y0NJNk1UWXpOalkwTXpJME55d2ljbTlzWlhNaU9sc2lVazlNUlY5VlUwVlNJbDBzSW5WelpYSnVZVzFsSWpvaVpYSnVZVE01UUhkbFltVnlMbU52YlNKOS5obWZqQ3NBWDFsWHdCMWdUNDlRUFdRWjM4OG52b2pKTlJMaDI1d3RCTVlBSHhQN2RxelpsZWFzTWZSVXZqSmJXVjdRUldYZnRYYUJFOG1pTEE4Y1JsNTVlZUd5bE9MbHhoQVRORTZPNjZLQjdzMXhPczB6Nmg1TXFadnlRa3JhcjFfYnF5WXgzQzBZdXVHWk1NWEFMUDJPS3Q5Sjk2dVdZVF9KT25USzNhRTZEQnpqaWF5OWw2alludExLZkUyQUhKMVgwVE9UcEN3QjBHeFB3d1otVWh0NjU5NEtLZS0yakpkQmhqd185VGJWSUVFaV9SbF8zMDFabmhHdDZZYzN6SE9WNm9WSk4zOTBSTXFrM283cWRONkw0R0JKb1g5NzQ1NkNJLTVFSllJN3ozcXpjVEwtZUNGc3luRkJIZHEzNnF2TFd3aDJpeDVkTy1MVDU1cXE5VlEiLCJpYXQiOjE2MzY2NTcwNjYsImV4cCI6MTYzOTI0OTA2Nn0.QGRPwJSECbFfkvUyn8h-gInELUzGHsxBFrnMAW9zEfqCuHwJRkT1aunqFt7g5aWp6DZrSUHaKvp3OJr-0xwUzw

如果我解码这个 jwt，我会得到一个对象，其中一个属性是 jwt，值是我从 API 收到的令牌。

谁能告诉我

如果这是正确的格式并且
如何在对受限 API 端点的 fetch 调用中使用它？

目前我只是使用此选项进行 fetch 调用

    method: 'GET',
    'cors': 'no-cors',
    credentials: 'same-origin'

但运气不好，我得到的回应是

 [Symbol(Response internals)]: {
    url: 'https://localhost/countries',
    status: 401,
    statusText: 'Unauthorized',
    headers: Headers { [Symbol(map)]: [Object: null prototype] },
    counter: 0
  }

【问题讨论】：

您从哪里提出请求？如果它是从浏览器完成的，那么您设置 fetch 调用的方式将自动发送带有请求的 cookie。

标签： javascript jwt next.js fetch next-auth

【解决方案1】：

您需要检查您的 API 文档以了解其预期内容。例如，您通常会将令牌附加到 Authorization 标头

【讨论】：

很好，但我如何读取该 cookie 以传递令牌？ afaik js 无法读取 httpOnly cookie。
抱歉，刚看到这个。 cookie 将与您的请求一起发送，服务器可以读取它。这通常是用于刷新令牌的方法