本地Angular连接服务器Node.js服务时遇CORS策略拦截求助

• 确认CORS中间件加载顺序
  必须保证cors中间件在所有路由定义之前加载，且早于任何可能修改请求/响应头的中间件。示例正确顺序：

  const express = require('express');
  const cors = require('cors');
  const app = express();
  
  // 先加载CORS配置
  const CORSOrigin = ['http://localhost:3000'];
  app.use(
    cors((req, callback) => {
      const options = {
        credentials: true,
        origin: CORSOrigin,
      };
      callback(null, options);
    })
  );
  
  // 再定义业务路由
  app.get('/api/get', (req, res) => {
    // 路由处理逻辑
  });
  
  app.listen(3500);
  

• 验证实际请求的Origin值
  浏览器发送的Origin可能和你配置的http://localhost:3000存在差异（比如协议是https而非http、端口不一致等）。在CORS回调中打印实际Origin排查：

  app.use(
    cors((req, callback) => {
      console.log('实际请求Origin:', req.headers.origin); // 查看控制台输出
      const options = {
        credentials: true,
        origin: CORSOrigin,
      };
      callback(null, options);
    })
  );
  

  如果打印出的Origin不在CORSOrigin数组中，需要将其添加到数组内。

• 配套设置credentials参数
  因为你开启了credentials: true，需同时满足：

  • Angular端请求需设置withCredentials: true：

    this.http.get('http://xxxxxxx.xxxx.net:3500/api/get', { withCredentials: true }).subscribe(...);
    

  • 服务器端Access-Control-Allow-Origin不能设为通配符*，必须是具体域名（你当前的数组配置符合要求）。

• 检查反向代理/防火墙配置
  如果Node.js服务前有Nginx等反向代理，需确保代理层允许OPTIONS预检请求并转发CORS头。示例Nginx配置：

  location / {
    if ($request_method = OPTIONS) {
      add_header Access-Control-Allow-Origin http://localhost:3000;
      add_header Access-Control-Allow-Methods GET, POST, OPTIONS;
      add_header Access-Control-Allow-Headers Content-Type, Authorization;
      add_header Access-Control-Allow-Credentials true;
      return 204;
    }
    proxy_pass http://localhost:3500; # 指向你的Node服务地址
  }
  

• 简化配置排查问题
  暂时改用静态CORS配置测试，排除动态回调的逻辑问题：

  app.use(cors({
    origin: 'http://localhost:3000',
    credentials: true
  }));
  

  如果此配置生效，说明之前的动态回调存在逻辑错误。

• 清除浏览器缓存测试
  浏览器可能缓存旧的CORS响应头，导致新配置不生效。尝试用无痕模式打开页面，或清除浏览器缓存后重新测试。

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