Angular前端与Node后端CORS错误技术求助

问题背景 #

Angular应用运行在http://localhost:4200，向http://localhost:3000/api/auth/signin发起API请求时，浏览器报CORS错误，但Postman中请求正常。已手动配置CORS响应头但问题未解决，现有配置代码：

app.use(function (req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.setHeader('Access-Control-Allow-Methods', "GET, POST, PATCH, DELETE, OPTIONS");
  next();
});

解决方案 #

1. 使用官方cors包（推荐） #

手动设置响应头容易遗漏预检请求处理，使用成熟的npm包更可靠：

• 安装依赖：

  npm install cors
  

• 在server.js中配置（需放在路由定义之前）：

  const cors = require('cors');
  // 允许所有来源跨域（开发环境可用）
  app.use(cors());
  
  // 生产环境建议限制特定来源：
  // app.use(cors({
  //   origin: 'http://localhost:4200',
  //   methods: ['GET', 'POST', 'PATCH', 'DELETE', 'OPTIONS'],
  //   allowedHeaders: ['Origin', 'X-Requested-With', 'Content-Type', 'Accept']
  // }));
  

2. 修正手动配置的问题 #

如果坚持手动设置头，必须处理浏览器的OPTIONS预检请求：

app.use(function (req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.setHeader('Access-Control-Allow-Methods', "GET, POST, PATCH, DELETE, OPTIONS");
  
  // 直接响应OPTIONS预检请求，无需进入后续路由
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  
  next();
});

注意：确保这个中间件的注册顺序在所有路由（如app.use('/api/auth', ...)）之前，否则路由处理时还未设置CORS头。

3. 排查其他中间件干扰 #

检查是否有body-parser、认证中间件等在CORS中间件之前执行，这类中间件可能提前结束请求，导致CORS头未被设置。确保CORS中间件是第一个被注册的中间件之一。

内容的提问来源于stack exchange，提问作者J.G.Sable