React应用中Axios未将httpOnly Cookie发送回服务器问题求助

你的axios代码本身是正确的，但服务器收不到httpOnly Cookie通常是跨域配置、Cookie属性或者域名匹配的问题，按下面的点逐一排查：

• 确认跨域CORS配置：如果前端和服务器不同域，服务器必须返回这两个响应头：

  • Access-Control-Allow-Origin：必须设为前端的具体域名（不能用*，否则withCredentials会失效）
  • Access-Control-Allow-Credentials: true
    同时前端的withCredentials: true要保持开启。

• 检查Cookie的SameSite属性：

  • 如果是跨域场景，Cookie的SameSite不能设为Strict，建议设为Lax；如果是跨站点请求（比如前端在a.com，服务器在b.com），需要设为None，但None必须搭配Secure属性（仅HTTPS环境生效）。

• 验证Cookie的Domain和Path：

  • Domain要和前端请求的域名匹配，比如前端是app.yourdomain.com，Cookie的Domain需设为yourdomain.com才能被携带；
  • Path需设为/或者/refresh对应的路径，路径不匹配时Cookie不会随请求发送。

• 核对axios请求地址：
  确认/refresh请求的目标是正确的服务器域名，要是axios全局配置了baseURL，检查是否指向了正确的后端地址，避免请求发到前端域名导致Cookie不匹配。

• 浏览器调试确认：
  打开开发者工具的Network面板，查看/refresh请求的Request Headers，确认是否存在Cookie字段：

  • 没有的话，问题出在前端Cookie设置或跨域配置；
  • 有的话，检查服务器端的Cookie解析逻辑，是否正确读取了请求头里的Cookie。

你的请求代码：

const response = await axios.get('/refresh', {
  withCredentials: true
});

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