深入解析CORS机制与跨域安全实践

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

现代Web开发中，跨域问题就像小区门禁系统——默认情况下，A小区的住户（前端JavaScript）无法直接访问B小区的资源（后端API），除非获得明确授权。这种限制源于浏览器的同源策略（Same-Origin Policy），它是Web安全的基石之一。

同源策略规定：当协议、域名、端口三者完全相同时才视为同源。例如：

• https://example.com/app 和 https://api.example.com/data 不同源（域名不同）
• http://localhost:3000 和 http://localhost:8080 不同源（端口不同）
• https://site.com 和 http://site.com 不同源（协议不同）

这种限制主要针对：

• XMLHttpRequest/Fetch API请求
• Web字体加载
• Web Workers脚本
• 操作iframe内DOM等场景

注意：某些标签如<img> <script>允许跨域加载资源，但JavaScript无法读取这些资源的内容。

2. CORS机制深度解析

2.1 预检请求（Preflight）全流程

当请求满足以下任一条件时，浏览器会先发送OPTIONS预检请求：

• 使用PUT/DELETE/PATCH等方法
• 自定义请求头（如X-Auth-Token）
• Content-Type非application/x-www-form-urlencoded、multipart/form-data或text/plain

典型预检请求交互示例：

http复制OPTIONS /api/user HTTP/1.1
Origin: https://frontend.com
Access-Control-Request-Method: DELETE
Access-Control-Request-Headers: X-Custom-Header

服务端响应必须包含：

http复制HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://frontend.com
Access-Contr