React应用未发送Cookie中存储的Refresh Token问题求助

你的问题核心是跨域场景下Cookie的存储与携带规则不匹配，Postman能正常工作是因为它不严格遵循浏览器的Cookie安全策略，而浏览器在开启withCredentials后有严格的校验规则。以下是针对性的修复步骤：

1. 修复后端Cookie配置：补全secure属性 #

当sameSite: "None"时，浏览器要求Cookie必须设置secure: true（仅在HTTPS下传输），否则会拒绝存储Cookie。本地开发环境（HTTP）可以例外，做环境判断即可：

response.cookie("auth", refreshToken, {
  httpOnly: true,
  sameSite: "None",
  secure: process.env.NODE_ENV !== 'development', // 开发环境关闭secure，生产环境开启
  maxAge: 24 * 60 * 60 * 1000,
});

注意：如果本地开发用了HTTPS（比如通过mkcert配置），则secure要始终设为true。

2. 确保前端Axios实例显式启用withCredentials #

全局配置axios.defaults.withCredentials = true可能不会被自定义实例继承，直接在privateInstance里显式配置更可靠：

const privateInstance = axios.create({
  baseURL: "http://localhost:5000/api/v1",
  withCredentials: true, // 显式开启跨域携带Cookie
});

3. 验证浏览器Cookie存储状态 #

打开浏览器开发者工具 → Application → Cookies → http://localhost:5000，检查是否存在auth Cookie：

• 如果没有：说明后端Cookie配置不满足浏览器安全规则，回到步骤1检查sameSite和secure属性。
• 如果存在但请求时未携带：检查请求域名是否和Cookie的domain一致（默认是localhost，无问题），以及请求是否为跨域场景（你的场景符合，需确保CORS配置正确）。

4. 确认刷新Token的请求使用正确的Axios实例 #

刷新Access Token的请求必须使用带withCredentials的privateInstance，否则不会自动携带Cookie。示例调用：

// 刷新Token接口示例
privateInstance.post('/auth/refresh')
  .then(res => {
    // 更新store中的accessToken
  })

5. 后端CORS配置额外检查 #

确保CORS的origin是精确值（不能用*），你的配置已经设置为"http://localhost:3000"，这部分没问题。后续部署到生产环境时，需将origin替换为实际前端域名。

测试验证流程 #

1. 重启后端服务，清除浏览器现有Cookie。
2. 重新登录，检查Application面板是否存在auth Cookie。
3. 发起需要刷新Token的请求，查看Network面板的Request Headers里是否包含Cookie: auth=xxx。

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