前端跨域 CORS

浏览器的同源策略(Same-Origin Policy)

浏览器出于安全考虑，实施了同源策略，当一个网页请求另一个源的资源时，浏览器会阻止请求，除非目标服务器明确允许。

┌─────────────────────────────────────────────────────────┐
│                        浏览器                            │
│  ┌─────────────────────────────────────────────────┐    │
│  │  页面源：http://example.com:80                   │    │
│  └─────────────────────────────────────────────────┘    │
│                                                         │
│   请求 A → http://example.com/api     ✅ 同源，允许       │
│   请求 B → http://api.example.com     ❌ 跨域，阻止       │
│   请求 C → https://example.com        ❌ 跨域，阻止       │
│   请求 D → http://example.com:8080    ❌ 跨域，阻止       │
└─────────────────────────────────────────────────────────┘

同源 ： 由 协议 + 域名 + 端口 三部分组成 三者都相同才属于同源

CORS

CORS（Cross-Origin Resource Sharing） 是 W3C 制定的跨域资源共享标准。它通过 HTTP 头部机制，允许服务器声明哪些来源可以访问其资源，从而安全地实现跨域请求。

请求类型

简单请求

1. 请求方法为 GET POST HEAD
2. 请求头只包含CORS安全列表中的头部 如 Accept Content-Type

预检请求

不满足简单请求的条件，浏览器会发送预检请求（OPTIONS 请求），询问服务器是否允许跨域请求。

预检请求包含以下头部：

• Access-Control-Request-Method： 后续请求的方法
• Access-Control-Request-Headers： 后续请求的自定义头部

服务器收到预检请求后，需要根据请求头判断是否允许跨域请求。如果允许，服务器会返回 204 状态码，否则返回 403 状态码。

后续请求包含以下头部：

• Origin： 发起请求的源
• Access-Control-Request-Headers： 后续请求的自定义头部

服务器收到后续请求后，需要根据请求头判断是否允许跨域请求。如果允许，服务器会返回资源内容，否则返回 403 状态码。

预检结果会有预检缓存，后续请求会直接使用缓存结果，而不会再次发送预检请求。Access-Control-Max-Age 头部可以设置预检缓存时间。