Next.js中使用Fetch发送HttpOnly Cookie及服务器组件Cookie缺失问题

• 已完成相关指南，计划通过服务器组件获取用户详情
• 将个人资料页自定义并转换为服务器组件后，刷新页面发起Fetch请求时，浏览器中存在的token Cookie未被携带至请求中
• 通过路由处理器代码验证，无法获取到token：

const token = request.cookies.get("token")?.value || "";
console.log(token, "token");

• 同时需要了解在Next.js中如何使用Fetch请求发送HttpOnly Cookie

服务器组件中Fetch携带Cookie的默认行为 #

Next.js服务器组件发起同域名Fetch请求时，会自动携带当前域名下的所有Cookie（包括HttpOnly类型），无需手动配置。若未携带，可从以下几点排查：

• Cookie属性检查：确认浏览器中token Cookie的Domain、Path、SameSite配置是否匹配当前请求：
  • Domain需与当前页面域名一致（或父域名，如.example.com可匹配所有子域名）
  • Path需覆盖请求的API路径（若设为/则所有路径都可携带）
  • SameSite若设为Strict，仅同站请求会携带；设为Lax则大部分场景可携带
• 请求URL验证：确保Fetch请求的API路由URL正确，无拼写错误，且为同域名地址
• 路由处理器排查：在路由处理器中打印所有Cookie，确认是否存在获取逻辑问题：

console.log("All cookies:", request.cookies);

跨域场景下的处理（若调用第三方API） #

若需通过服务器组件向第三方域名发送请求并携带浏览器的HttpOnly Cookie，需注意：

• 服务器组件运行在服务器端，默认携带的是服务器端的Cookie，而非浏览器端的
• 若要传递浏览器的Cookie到第三方API，建议通过客户端组件发起请求，并在Fetch选项中添加credentials: 'include'；或在路由处理器中接收浏览器Cookie后，再转发至第三方API

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