Next.js+Next-Auth场景下如何用httpOnly Cookie内的JWT调用受限API

1. 你提供的JWT格式是否符合规范？ #

符合规范。
标准JWT的结构为Header.Payload.Signature，三部分以半角句号分隔，你提供的样本完全匹配该结构：

• 第一部分Header解码后为{"alg":"HS512"}，合法声明了签名算法为HS512
• 第二部分Payload包含JWT标准声明iat（签发时间戳）、exp（过期时间戳），同时自定义字段存储你的API访问令牌，自定义字段无强制命名要求，属于合法配置
• 第三部分为前两部分经过指定算法加密钥生成的签名，格式符合规范要求

2. 调用受限制API端点的正确方法 #

你当前的fetch配置存在两处核心错误，直接导致401未授权：

• 参数名错误：fetch的跨域配置字段为mode，你写的'cors': 'no-cors'属于无效配置，且no-cors模式会禁止自定义请求头（如认证所需的Authorization头），同时无法读取正常响应内容，完全不适合当前场景
• 未携带API要求的身份认证凭证

具体操作步骤 #

因为__Secure-next-auth.session-token带有httpOnly属性，前端JS无法直接读取cookie内容，你需要通过next-auth提供的方法获取解码后的会话信息：

1. 获取API访问令牌
   客户端组件使用useSession()钩子获取会话：

   import { useSession } from "next-auth/react"
   
   // 组件内调用
   const { data: session } = useSession()
   // 按你实际存储的字段名取值，你提到解码后存在jwt属性，对应如下写法
   const accessToken = session?.jwt
   

   服务端组件/API路由中可以使用getServerSession()方法获取会话。

2. 修正fetch配置
   如果API要求在请求头中携带Bearer格式的令牌，使用如下配置：

   const res = await fetch('https://localhost/countries', {
     method: 'GET',
     mode: 'cors', // 同源请求可省略该参数
     headers: {
       'Authorization': `Bearer ${accessToken}`
     },
     credentials: 'include' // 若API需要额外校验cookie可保留，不需要可删除
   })
   

   如果API可以直接识别__Secure-next-auth.session-token cookie，且和前端同域，使用如下配置即可：

   const res = await fetch('https://localhost/countries', {
     method: 'GET',
     credentials: 'same-origin'
   })
   

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