电商平台CORS跨域问题排查与优化实践

Terminucia

1. 问题背景与现象描述

去年第三季度，我们负责的全球化电商平台在印度孟买区域突然出现用户数据异常。前端监控系统显示，当地用户在提交订单后频繁出现"数据丢失"提示，部分用户支付成功后需要等待5-8分钟才能在账户看到订单记录。更棘手的是，这些问题仅出现在使用当地运营商Jio 4G网络的移动端用户群体中。

作为系统稳定性负责人，我第一时间拉取了以下关键数据：

错误集中发生在UTC+5:30时区的工作日晚高峰（当地时间18:00-21:00）
受影响API集中在/order/create和/order/query两个端点
平均延迟从正常的200ms飙升到4200ms
孟买AWS区域的服务器CPU/内存指标完全正常

2. 初期排查与方向误判

2.1 第一反应：数据库性能问题

我们首先怀疑是数据库瓶颈，因为订单服务使用MySQL分库。但监控显示：

主库QPS峰值仅1200（设计容量5000+）
慢查询日志无异常
从库同步延迟始终<50ms

关键发现：数据库连接池监控显示，印度区域的活跃连接数比其他区域低40%

2.2 网络链路测试

通过从孟买EC2发起探测，发现：

bash复制# 到订单服务的TCP连接建立时间
mtr -T -P 443 api.orderservice.com
Avg latency: 38ms (正常)
Packet loss: 0%

# 到北京主数据中心的专线质量
tcpping -x 5 10.16.32.11
Min=276ms, Max=297ms (符合SLA)

3. 关键转折点：浏览器端日志分析

3.1 用户端埋点数据异常

通过分析前端SDK采集的完整请求流水日志，发现两个异常模式：

预检请求(OPTIONS)与正式请求(POST)间隔达3.2秒
部分请求的响应头中缺少Access-Control-Expose-Headers字段

javascript复制// 典型错误案例
const res = await fetch('/api/order', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Request-ID': '8a7d6f'  // 自定义头
  }
});
// 控制台警告：
// Access to XMLHttpRequest at 'https://api.orderservice.com/order/create' 
// from origin 'https://www.example.com' has been blocked by CORS policy: 
// Response to preflight request doesn't pass access control check: 
// No 'Access-Control-Allow-Origin' header is present on the requested resource.

3.2 根本原因定位

深入分析发现：

印度本地运营商对跨域请求有特殊过滤策略
我们的Nginx配置未考虑极端网络条件：

nginx复制# 原配置（问题所在）
add_header 'Access-Control-Allow-Origin' '$http_origin' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
# 缺少关键头

4. 解决方案与验证

4.1 完整CORS配置方案

更新后的Nginx配置：

nginx复制location /api/ {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '$http_origin';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-Request-ID,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
    }

    add_header 'Access-Control-Allow-Origin' '$http_origin' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    add_header 'Access-Control-Expose-Headers' 'X-Request-ID' always;
    proxy_pass http://order-service;
}