React应用POST /refresh接口无法获取refresh_token Cookie问题

问题背景 #

• 技术栈：React + Vite，前端部署在http://localhost:5173
• 服务架构：主服务server.js运行在8080端口，认证服务authServer.js运行在8081端口
• 问题现象：
  • 登录刷新逻辑在Postman中测试正常，但React应用内出现异常
  • 认证服务/refresh接口收到的req.cookies始终是空对象{}，返回401未授权状态码
  • 登录后刷新页面，/refresh接口响应信息如下：

    bodyUsed: false
    headers: Headers {}
    ok: false
    redirected: false
    status: 401
    statusText: "Unauthorized"
    type: "cors"
    url: "http://localhost:8081/refresh
    

• 涉及文件：authServer.js、AuthContext.jsx、ProtectedRoutes.jsx

解决方案 #

在前端发起的/users/login请求配置中添加credentials: "include"。

原因说明 #

跨域场景下，浏览器默认不会自动携带Cookie等凭证信息。添加credentials: "include"后，浏览器会在跨域请求中携带Cookie，认证服务才能通过req.cookies获取到refresh_token，进而完成刷新令牌的逻辑。

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