无法在GET API中通过Cookie传递JWT令牌的问题排查

问题背景 #

实现用户登录功能后，JWT令牌以Cookie形式返回客户端，但调用后端GET API时，Cookie未传入请求头，POST请求则正常。使用Express作为后端，React+Axios作为前端。

问题分析与修复步骤 #

1. 清理重复的CORS配置 #

后端同时使用了cors中间件和自定义响应头设置，会导致重复的CORS响应头，引发浏览器校验异常。保留cors中间件即可，删除冗余的自定义header代码：

// 替换原有CORS配置为以下代码
app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true,
  methods: ['GET', 'PUT', 'POST', 'DELETE'],
  allowedHeaders: ['Origin', 'X-Requested-With', 'Content-Type', 'Accept']
}));

2. 调整Cookie的secure属性 #

本地开发使用HTTP协议（localhost），而secure: true要求Cookie仅在HTTPS环境下传输，这会导致GET请求无法携带Cookie。开发环境关闭secure，生产环境再启用：

// 修改user.js中的Cookie设置
res.cookie('x-auth-token', user.token, {
  httpOnly: true,
  sameSite: process.env.NODE_ENV === 'production' ? 'None' : 'Lax',
  secure: process.env.NODE_ENV === 'production'
});

3. 修正Axios请求的参数格式 #

POST请求的参数传递存在错误（拆分了配置对象），虽然看似正常，但属于不规范写法。同时确保GET请求的配置统一规范：

// 修正POST请求
export const callPostAPI = async (api, parameters, headers = {}) => { 
  try {
    const response = await axios.post(
      process.env.REACT_APP_BASE_URL + api, 
      parameters, 
      { 
        headers,
        withCredentials: true 
      }
    );
    return response.data;
  } catch (error) {
    console.log(error);
    throw error;
  }
}

// 规范GET请求（补充headers参数，保证配置统一）
export const callGetAPI = async (api, headers = {}) => {
  try {
    const response = await axios.get(
      process.env.REACT_APP_BASE_URL + api, 
      { 
        headers,
        withCredentials: true 
      }
    );
    return response.data;
  }   
  catch(error) {
    throw error;
  }    
}

额外验证 #

• 打开浏览器控制台的「Application」标签，确认x-auth-token Cookie已正确存储
• 查看GET请求的「Network」面板，检查Request Headers中是否包含Cookie字段

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