Node.js + Angular项目请求后端触发CORS跨域错误，自定义响应头设置无效如何解决

问题原因 #

你手写的CORS中间件未生效，核心是3个常见配置错误：

• 中间件执行顺序错误：如果这段代码放在路由定义之后，请求会先匹配到路由直接返回，不会执行响应头设置逻辑
• 未处理OPTIONS预检请求：Angular发送带JSON body的POST等复杂请求时，浏览器会先发送OPTIONS预检请求验证跨域权限，你没有对这类请求做单独响应
• 缺少允许的请求头配置：未声明允许前端携带Content-Type、Authorization等常用请求头，也会触发CORS拦截

修复方案 #

方案1：完善手写的CORS中间件 #

调整代码顺序到所有路由、其他中间件（如express.json()）之前，并补充完整配置：

// 放在代码最开头，所有app.use、路由定义之前
app.use(function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  // 允许的请求方法
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  // 允许的请求头，覆盖Angular默认携带的头
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,Authorization');
  // 处理预检请求直接返回204
  if (req.method === 'OPTIONS') {
    return res.sendStatus(204);
  }
  next();
});

如果不希望用*允许所有源，可以改成你前端的域名https://ecstatic-engelbart-897f34.netlify.app，安全性更高。

方案2：使用官方cors包（更简单，不易出错） #

1. 安装依赖：

npm install cors

2. 引入并配置，同样放在所有路由之前：

const cors = require('cors');
// 允许所有源
app.use(cors());

// 仅允许你的前端源的配置写法
// app.use(cors({
//   origin: 'https://ecstatic-engelbart-897f34.netlify.app'
// }));

内容的提问来源于stack exchange，提问作者Mr.EmD