Node.js服务器与React客户端请求头及CORS配置问题

看起来你遇到了跨域请求的典型问题——带凭证和自定义头的请求触发了浏览器的预检机制，而你的服务器CORS配置没跟上，导致请求被拦截。咱们一步步来修复：

一、先搞定服务器端的CORS配置（核心问题） #

你手动写的CORS中间件有两个关键漏洞：没处理浏览器的OPTIONS预检请求，以及允许的请求头不全。这里给你两种方案：

方案1：用官方cors包（推荐，避免手动踩坑） #

手动写CORS很容易遗漏细节，直接用成熟的npm包更稳妥：

1. 先安装依赖：

npm install cors

2. 在路由中配置CORS（要确保在你的接口路由之前应用）：

const cors = require('cors');

// 配置CORS规则
const corsOptions = {
  origin: 'http://localhost:3000', // 只允许你的React客户端域名
  credentials: true, // 允许携带凭证（Authorization头、Cookie等）
  allowedHeaders: ['Authorization', 'Origin', 'Content-Type', 'Accept'], // 匹配客户端发送的请求头
  exposedHeaders: ['Authorization', 'Uid'] // 如果需要让前端获取自定义响应头，这里配置
};

// 把CORS中间件应用到你的好友接口路由
router.use(cors(corsOptions));

// 你的搜索接口保持不变
router.get("/search/:userSearchParam" , async (req, res) => { 
  let user = await User.find( { name: { $regex: req.params["userSearchParam"], $options: "i" } }, { name: 1, _id: 1 } ); 
  if (user.length > 0) { 
    res.json(user); 
  } else { 
    res.sendStatus(204); 
  } 
});

方案2：修复你自定义的CORS中间件 #

如果坚持自己写，必须处理OPTIONS预检请求，补全允许的请求头：

withAuth: function (req, res, next){ 
  // 处理浏览器的OPTIONS预检请求
  if (req.method === 'OPTIONS') {
    res.header("Access-Control-Allow-Credentials", 'true'); 
    res.header("Access-Control-Allow-Origin", 'http://localhost:3000'); 
    res.header("Access-Control-Allow-Methods", 'GET, OPTIONS'); // 允许的请求方法
    res.header("Access-Control-Allow-Headers", 'Authorization, Origin, Content-Type, Accept'); // 匹配客户端发送的头
    res.sendStatus(200); // 预检请求直接返回成功
    return;
  }
  // 非OPTIONS请求的常规配置
  res.header("Access-Control-Allow-Credentials", 'true'); 
  res.header("Access-Control-Allow-Origin", 'http://localhost:3000'); 
  res.header("Access-Control-Allow-Headers", 'Authorization, Origin, Content-Type, Accept'); 
  res.header("Access-Control-Expose-Headers", 'Authorization, Uid'); 
  next(); 
}

⚠️ 注意：这个中间件一定要在你的/api/friend路由之前注册，否则接口会先处理请求，CORS头还没设置就返回了。

二、调整客户端的请求代码 #

你的axios请求有两个小问题：

1. URL可能有误：服务器运行在localhost，但默认端口是80？如果你的服务器是用3001之类的端口启动的，请求URL要加上端口，比如http://localhost:3001/api/friend/search/${val}
2. Origin头不需要手动设置：浏览器会自动根据当前页面域名添加，手动设置反而可能触发异常

修改后的客户端代码：

handleChange(event) { 
  const val = event.target.value; 
  const auth = this.state.auth; 
  console.log(this.state.auth); 
  this.setState({ [event.target.name]: val }); 
  if (val.length > 3) { 
    // 替换成你服务器实际的端口号
    axios.get(`http://localhost:3001/api/friend/search/${val}`, { 
      headers: { 
        'Authorization': auth, // 直接用变量更简洁
      }, 
      credentials: "include", 
    }) 
    .then(function (response) { 
      // 注意：204状态码没有响应体，axios会触发then但response.data为空
      if (response.status === 200) {
        console.log('搜索结果：', response.data); 
      } else if (response.status === 204) {
        console.log('没有找到匹配的用户');
      }
    }) 
    .catch((err) => { 
      console.log('请求失败：', err.response?.data || err.message); 
    }); 
  } 
}

三、额外检查点 #

• 先用Postman测试你的服务器接口，确认接口本身能正常返回数据，排除CORS之外的问题
• 打开浏览器控制台的Network面板，查看请求的状态码和响应头，确认Access-Control-*系列头是否正确返回
• 如果你的Authorization头是Bearer token，确保格式正确（比如Bearer xxxxxxxxxx）

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