一文彻底了解浏览器跨域机制（同源策略与解决方案）
一、什么是跨域问题
跨域并不是某一种具体的技术错误，而是浏览器出于安全考虑而实施的一整套访问限制策略所带来的结果。这套策略的核心就是同源策略（Same-Origin Policy）。
1.1 跨域的根本来源：同源策略
同源策略是浏览器最基础、也是最重要的安全机制之一，其目标只有一个：
防止一个源的恶意脚本，读取或篡改另一个源的敏感数据
如果没有同源策略，任意网站都可以在用户浏览器中读取：
- 登录态 Cookie
- 用户隐私信息
- 内部系统接口返回的数据
后果是灾难性的。
二、什么是“源（Origin）”
2.1 源的定义
源 = 协议（Scheme） + 域名（Host） + 端口（Port）
三者完全一致，才属于同源。
⚠️ 路径（Path）和查询参数（Query String）不参与同源判断
2.2 同源判断示例
三、同源请求与跨域请求
3.1 同源请求
- 当前页面源 == 目标资源源
- 浏览器完全放行
- 不存在任何安全限制
3.2 跨域请求（异源请求）
- 当前页面源 ≠ 目标资源源
- 浏览器会在响应阶段进行校验
- 校验失败直接拦截数据
四、浏览器对跨域的三大限制
4.1 DOM 访问限制
- 脚本无法操作跨域 iframe 的 DOM
- 直接访问会抛出安全异常
4.2 Cookie / Storage 访问限制
- Cookie、localStorage、sessionStorage 都严格遵循同源策略
- 这是防止会话劫持的关键机制
4.3 Ajax / Fetch 响应限制
- 请求一定会发送到服务器
- 服务器也能正常返回
- 浏览器不允许 JS 读取响应内容
五、几个非常关键的误区
- 跨域限制只存在于浏览器
- 后端之间调用永远不存在跨域
- Network 面板看到成功 ≠ JS 能拿到数据
六、解决跨域的本质
不是让请求成功，而是让浏览器允许你读取响应
七、CORS：官方标准解决方案
7.1 CORS 概述
CORS（Cross-Origin Resource Sharing）是一套浏览器跨域访问规范。
服务器通过响应头明确声明：
哪些源、哪些方法、哪些头是被允许的
7.2 浏览器的判定逻辑
- 未返回 CORS 响应头 → ❌
- 明确允许当前源 → ✅
八、简单请求（Simple Request）
8.1 判定条件
- 方法：GET / POST / HEAD
- 无自定义请求头
- Content-Type：
- text/plain
- application/x-www-form-urlencoded
- multipart/form-data
8.2 请求流程
mermaid
sequenceDiagram
浏览器 ->> 服务器: 请求
服务器 ->> 浏览器: 响应 + CORS 头
浏览器 ->> 浏览器: 校验九、预检请求（Preflight Request）
9.1 触发场景
- PUT / DELETE / PATCH
- Authorization 等自定义请求头
- application/json
9.2 请求流程
sequenceDiagram
浏览器 ->> 服务器: OPTIONS
服务器 ->> 浏览器: 允许规则
浏览器 ->> 服务器: 实际请求
服务器 ->> 浏览器: 实际响应十、携带 Cookie 的跨域请求
10.1 前端配置
javascript
fetch(url, {
credentials: 'include'
})10.2 服务端要求
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://a.example.com⚠️ 开启 Credentials 时，Allow-Origin 不能为 *
十一、最常见的 CORS 错误
- OPTIONS 请求被拦截
- llow-Origin 不匹配
- 使用 * 却开启 Credentials