在Node.js中设置访问控制头以适配Angular前端接收

我来帮你搞定这个Express跨域配置的问题！你的MEAN栈用户认证流程已经在本地跑通，就差解决跨域这一步，这在Express里其实是很常规的操作，给你两种实用方案，按需选择：

方案1：手动编写CORS中间件 #

如果不想额外安装依赖，可以直接在你的Express app里添加一个自定义中间件，覆盖跨域所需的响应头：

// 在所有路由之前添加这个中间件
app.use((req, res, next) => {
  // 允许你的Angular前端域名访问，也可以用`*`允许所有（*生产环境不建议*）
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');
  // 允许前端发送的请求方法
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  // 允许前端携带的请求头，比如Content-Type（登录请求要传JSON的话需要这个）
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  // 如果你的JWT是放在自定义响应头里（比如x-auth-token），需要暴露给前端让它能读取
  res.setHeader('Access-Control-Expose-Headers', 'x-auth-token');
  // 处理OPTIONS预检请求（浏览器会先发送OPTIONS请求检查跨域权限）
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

解释下关键配置：

• Access-Control-Allow-Origin：指定允许访问的前端域名，生产环境别用*，要写具体的域名（比如你的Angular部署地址）
• Access-Control-Expose-Headers：因为浏览器默认只允许前端读取少数响应头（比如Content-Type），如果你的后端把JWT放在自定义头里，必须用这个配置暴露出来，Angular才能通过response.headers.get('x-auth-token')拿到令牌
• OPTIONS预检请求：浏览器在发送POST等非简单请求前会先发OPTIONS，所以要直接返回200，避免请求被拦截

方案2：使用cors npm包（更简洁推荐） #

这个是官方维护的CORS处理包，配置更灵活，也不用自己写太多代码：

1. 首先安装依赖：

npm install cors

2. 在你的Express入口文件里引入并使用：

const cors = require('cors');

// 可以直接全局使用，或者针对特定路由配置
app.use(cors({
  origin: 'http://localhost:4200', // 允许的前端域名
  methods: ['GET', 'POST', 'OPTIONS'], // 允许的请求方法
  allowedHeaders: ['Content-Type'], // 允许的请求头
  exposedHeaders: ['x-auth-token'] // 暴露给前端的响应头
}));

如果需要更灵活的配置（比如允许多个域名），可以把origin设为一个函数，动态判断请求来源：

app.use(cors({
  origin: (origin, callback) => {
    // 允许本地开发环境和生产环境的域名
    const allowedOrigins = ['http://localhost:4200', 'https://your-production-angular-app.com'];
    if (!origin || allowedOrigins.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  },
  exposedHeaders: ['x-auth-token']
}));

额外注意事项 #

• 如果你把JWT存在Cookie里，记得加上credentials: true在cors配置里，同时前端Angular的请求也要设置withCredentials: true
• 生产环境一定要限制origin为具体的域名，不要用*，避免安全风险

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