Web开发中的跨域问题与CORS解决方案详解

1. 跨域请求的本质与安全边界

现代Web开发中，跨域问题就像小区门禁系统——浏览器默认禁止A小区的住户（源站点）直接访问B小区的资源（目标站点），除非获得明确授权。这种同源策略（Same-Origin Policy）是浏览器最基本的安全机制，它规定只有当协议、域名、端口三者完全相同时才被视为同源。

实际开发中最常遇到的场景是：前端服务部署在https://app.example.com，需要调用https://api.example.com的接口。虽然主域名相同，但子域名差异仍会被浏览器判定为跨域。我曾在一个电商项目中，因为CDN域名static.example.com与主站域名不同，导致字体文件加载失败，这就是典型的跨域资源加载问题。

关键点：同源策略限制的不仅是AJAX请求，还包括iframe嵌套、Web字体、Web Workers等资源的跨域访问

2. 跨域解决方案全景图

2.1 CORS：官方的跨域通行证

CORS（跨域资源共享）是W3C标准方案，就像官方颁发的通行证。服务端通过设置响应头来声明允许哪些外域访问资源。一个完整的CORS配置示例：

nginx复制# Nginx配置示例
location /api/ {
    add_header 'Access-Control-Allow-Origin' 'https://app.example.com';
    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';
    
    # 预检请求缓存
    add_header 'Access-Control-Max-Age' 1728000;
}

关键参数解析：

• Access-Control-Allow-Origin: 必须明确指定域名，不能用通配符*当需要携带Cookie时
• `Access-Control-Allow-Cre