Angular请求Express服务：预飞响应200却触发未知CORS错误

核心问题定位 #

• 前端请求逻辑不完整：提供的login函数仅组装了请求数据，但缺少调用Angular HttpClient发送请求的核心代码，这会导致请求未实际发起或逻辑异常。
• CORS请求头不匹配：预飞请求中携带了x-port自定义头，但后端Access-Control-Allow-Headers未包含该字段，即便预飞返回200，浏览器仍会拦截实际请求。
• 实际请求缺失Origin头：跨域场景下浏览器应自动添加Origin头，缺失可能源于：
  • 请求配置误用相对路径，导致浏览器误判为同源请求
  • 浏览器same-site判定异常（不同端口理论属于跨域，但部分浏览器判定逻辑存在偏差）
  • 请求选项配置错误，禁用了跨域相关标识

分步修复方案 #

1. 补全前端请求代码 #

确保login函数包含实际发送HTTP请求的逻辑，示例：

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

async login(data) {
    console.log('data is: ', data);
    let sendData = {};
    if (data.loginType === 'slot' || data.loginType === 'user_name') {
        sendData = {
            username: data.username,
            password: data.password,
            type: data.loginType
        };
    }
    // 补全请求发送逻辑，添加必要配置
    try {
        const response = await this.http.post(
            'http://localhost:3000/ibescore/auth/login',
            sendData,
            {
                headers: { 'X-Port': '4200' },
                withCredentials: true // 涉及认证/Cookie时开启
            }
        ).toPromise();
        return response;
    } catch (error) {
        console.error('Error occurred during login: ', error);
        throw error;
    }
}

2. 修正后端CORS配置 #

• 新增x-port到允许的请求头列表
• 兼容无Origin头的请求（如Postman测试场景）

app.use((req, res, next) => {
    const actualOrigin = req.headers.origin;
    // 允许无Origin或白名单内的请求
    if (!actualOrigin || originArray.includes(actualOrigin)) {
        res.setHeader('Access-Control-Allow-Origin', actualOrigin || '*');
    } else {
        return res.status(403).send('Unauthorized Origin');
    }
    res.setHeader(
        'Access-Control-Allow-Methods',
        'GET,POST,PATCH,DELETE,OPTIONS,PUT'
    );
    // 添加X-Port到允许的请求头
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Port');
    if (req.method === 'OPTIONS') {
        res.sendStatus(200);
    } else {
        next();
    }
});

3. 验证跨域请求标识 #

• 前端使用绝对路径发送请求，明确指向localhost:3000，避免浏览器误判同源
• 清除浏览器缓存或使用隐身模式测试，确认实际请求的Origin头是否正常携带

额外排查点 #

• 检查浏览器是否安装CORS插件，此类插件可能干扰正常跨域逻辑
• 确认originArray已包含http://localhost:4200，避免因Origin不在白名单被拒绝

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