React组件中Axios POST请求Authorization Header设置问题求助

关键排查点与修复步骤 #

1. 确认Cookie键名大小写
   你前端能打印出cookies.Token的值，但先检查react-cookie存储的键名是否真的是Token（首字母大写）。多数场景下cookie键名会用小写token，如果存的时候是这个，就得用cookies.token来获取。直接在组件里打印console.log(cookies)就能看到所有cookie的键名，避免大小写不匹配导致拿不到值。

2. 请求头写法无需纠结双引号
   JS对象里，键名没有特殊字符时，加不加双引号都不影响语法，VS Code自动移除是正常的格式化行为，不会影响请求头的发送。你现在的写法没问题，要是想保留双引号也可以，比如写成"Authorization": ...，但核心还是确保${cookies.Token}能正确拼接出有效值。建议在请求前加一行打印：

   console.log('待发送的Token:', cookies.Token);
   

   确认值确实存在再发请求。

3. 后端获取请求头的方式要正确
   HTTP请求头是不区分大小写的，但Node.js/Express这类后端框架会把请求头转为小写存储，所以后端要通过req.headers.authorization来获取，要是后端用了大写的Authorization，就会拿到undefined。检查下后端的获取逻辑是不是这里出了问题。

4. 跨域请求要配置CORS和withCredentials
   因为你的前端和后端端口不同（3000和3001），属于跨域请求，得确保：

   • 后端CORS配置允许携带自定义头和凭证：

     // Express示例
     const cors = require('cors');
     app.use(cors({
       credentials: true,
       origin: 'http://localhost:3000' // 指定前端地址，更安全
     }));
     

   • Axios请求里加上withCredentials: true，确保cookie能被携带到后端：

     const result = await axios({
       // ...其他配置
       withCredentials: true,
       // ...headers配置
     });
     

修正后的完整请求代码 #

const handleSubmit = async (event) => {
  event.preventDefault();
  try {
    const finalRecipe = { ...recipe };
    if (!finalRecipe.imageUrl) {
      finalRecipe.imageUrl = defaultImageUrl;
    }

    // 提前确认Token值
    console.log('当前Token:', cookies.Token);

    const result = await axios({
      method: "post",
      url: "http://localhost:3001/recipe/create",
      data: finalRecipe,
      withCredentials: true,
      headers: {
        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        Authorization: `Bearer ${cookies.Token}`,
      },
    });

    alert("recipe created");
    navigate("/");
  } catch (err) {
    if (err.response) alert(JSON.stringify(err.response.data));
    console.error('请求错误详情:', err);
  }
};

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