在计算机网络中,跨域(Cross-Origin) 指的是浏览器出于安全考虑,限制网页脚本(如 JavaScript)向与当前页面不同源(Origin) 的服务器发起请求的行为。这是由浏览器的同源策略(Same-Origin Policy) 强制实施的安全机制。
核心概念详解
1. 什么是“源”(Origin)?
“源”由三部分组成:
- 协议(Protocol):如
http://
、https://
- 域名(Domain):如
example.com
- 端口(Port):如
:80
(默认端口可省略)
例如:
https://www.example.com:443
和https://www.example.com
同源(端口隐式相同)。http://api.example.com
和http://www.example.com
不同源(子域名不同)。https://example.com
和http://example.com
不同源(协议不同)。
2. 同源策略的限制范围
当脚本尝试访问不同源的资源时,浏览器会拦截以下操作:
- AJAX / Fetch 请求:禁止读取跨域请求的响应(但请求可能实际已发送到服务器)。
- WebSocket 连接:部分浏览器限制跨域 WebSocket。
- DOM 访问:禁止通过
iframe
操作跨域页面的 DOM。 - Cookie/LocalStorage:禁止读取跨域站点的存储数据。
为什么需要跨域限制?
-
防御恶意攻击
- CSRF(跨站请求伪造):阻止恶意网站利用用户登录态伪造请求(同源策略本身不足以防 CSRF,需配合其他机制如 Token)。
- 数据窃取:防止恶意脚本读取用户在其他站点的敏感数据(如银行页面内容)。
-
保护用户隐私
避免网站通过脚本非法获取用户在其他站点的登录状态或历史记录。
如何解决跨域问题?
开发者可通过以下方式安全地实现跨域通信:
1. CORS(跨域资源共享) 🌟(主流方案)
- 原理:服务器在响应头中声明允许哪些源访问资源。
- 示例响应头:
Access-Control-Allow-Origin: https://www.yoursite.com // 允许特定源 Access-Control-Allow-Methods: GET, POST, PUT // 允许的请求方法 Access-Control-Allow-Headers: Content-Type // 允许的请求头
- 预检请求(Preflight):对复杂请求(如带自定义头),浏览器先发
OPTIONS
请求确认权限。
2. JSONP(JSON with Padding)(传统方案)
- 原理:利用
<script>
标签不受同源策略限制的特性,通过回调函数获取数据。 - 缺点:仅支持 GET 请求,安全性低(需信任服务器)。
3. 代理服务器(Proxy)
- 原理:将跨域请求转发到同源服务器,由服务器代为请求目标资源。
- 适用场景:前端开发中常用 webpack-dev-server 代理解决本地开发跨域。
4. WebSocket
- 特点:不受同源策略限制,适用于双向实时通信。
5. 修改域名(同源化)
- 将前端页面和后端 API 部署在同一域名下(如
www.example.com
和api.example.com
→ 通过 DNS 解析为同域)。
真实场景示例
// 前端尝试请求跨域 API
fetch('https://api.weather.com/data').then(response => response.json()).catch(error => console.error('跨域请求被拦截!'));// 浏览器报错:
// Access to fetch at 'https://api.weather.com/data' from origin 'https://your-site.com'
// has been blocked by CORS policy.
解决方案:
API 服务器需添加响应头:
Access-Control-Allow-Origin: https://your-site.com
重要注意事项
- 跨域是浏览器行为:Postman、curl 等工具不受同源策略限制。
- 简单请求 vs 预检请求:GET/POST 带标准头属于简单请求,直接发送;带自定义头会触发预检。
- Cookie 跨域:需设置
withCredentials: true
+ 服务器响应Access-Control-Allow-Credentials: true
。
总结
关键概念 | 说明 |
---|---|
同源策略 | 浏览器安全机制,限制跨源脚本交互。 |
跨域触发条件 | 协议、域名、端口任一不同即构成跨域。 |
解决方案 | CORS(推荐)、代理服务器、JSONP(过时)、WebSocket、同源化部署。 |
核心目标 | 平衡功能与安全,防止恶意网站窃取数据或伪造请求。 |
理解跨域机制是前后端协同开发的基础,正确配置 CORS 可兼顾安全性与灵活性。