页面刷新时无法携带Refresh Token Cookie，Postman可正常请求的问题

问题详情 #

• 用户登录时，后端通过loginUser函数将refreshToken设置为httpOnly Cookie，配置为：path: "/api/refresh_token"、maxAge: 30天
• 使用Postman调用/api/refresh_token接口，服务端能正常读取到refreshtoken，返回200状态码
• 前端页面按F5刷新时，调用该接口服务端读取到的req.cookies为空对象，返回400状态码

核心原因 #

1. Cookie路径限制：Cookie的path设置为/api/refresh_token，仅当请求精确匹配该路径时浏览器才会携带Cookie，若前端请求路径存在细微差异或跨域场景下未配置凭证，都会导致Cookie不被携带
2. 前端请求未开启凭证携带：默认情况下，Axios等HTTP库不会自动携带Cookie，尤其是跨域请求必须显式开启withCredentials
3. 后端CORS配置缺失：跨域场景下，后端未配置允许携带凭证（credentials: true），浏览器会拦截Cookie

解决方案 #

1. 调整Cookie路径配置（推荐） #

将Cookie的path改为/，使所有同域请求都能携带该Cookie，避免路径匹配问题：

// 修改loginUser函数中的res.cookie配置
res.cookie("refreshtoken", refresh_token, {
  httpOnly: true,
  path: "/", // 改为根路径
  maxAge: 30 * 24 * 60 * 1000,
  // 生产环境跨域需添加以下配置（HTTPS环境下生效）
  // sameSite: 'none',
  // secure: true,
});

2. 前端请求开启携带凭证 #

在封装的HTTP请求实例（如Axios）中开启withCredentials：

// 假设getAPI是Axios实例，添加配置
const api = axios.create({
  baseURL: '/api',
  withCredentials: true, // 关键：允许携带Cookie
});

若直接使用Axios请求，需在请求参数中添加：

const res = await axios.get('/api/refresh_token', { withCredentials: true });

3. 后端配置CORS允许凭证 #

若前后端跨域部署，需在CORS中间件中开启凭证支持，且Origin不能使用通配符*：

// Express框架示例，使用cors中间件
import cors from 'cors';

app.use(cors({
  origin: 'http://localhost:3000', // 替换为你的前端实际域名
  credentials: true, // 允许携带凭证
}));

4. 验证请求路径匹配 #

若坚持使用/api/refresh_token作为Cookie路径，需确保前端请求的URL与该路径完全一致（如无额外斜杠、路径拼写正确）

修改后的前端refreshToken Action示例 #

export const refreshToken = () => async (dispatch) => {
  const refresh = localStorage.getItem("refresh");
  if (refresh !== "todo") return;
  try {
    dispatch({ type: ALERT, payload: { loading: true } });
    // 确保getAPI已开启withCredentials
    const res = await getAPI("refresh_token");
    dispatch({ type: AUTH, payload: res.data });
    dispatch({ type: ALERT, payload: {} })
  } catch (err) {
    dispatch({ type: ALERT, payload: { errors: err?.response?.data.message } });
  }
}

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