跨域问题产生原因
浏览器出于安全考虑，实施了同源策略，这是跨域问题的根本原因。
什么是同源策略
同源策略（Same-Origin Policy）是浏览器最核心的安全机制，要求协议、域名、端口三者完全相同才算同源。
同源判定规则
| URL对比 | 协议 | 域名 | 端口 | 是否同源 |
|---|---|---|---|---|
http://localhost:8080/api vs http://localhost:8080/user | 相同 | 相同 | 相同 | 是 |
http://localhost:8080 vs http://localhost:9090 | 相同 | 相同 | 不同 | 否 |
http://localhost:8080 vs https://localhost:8080 | 不同 | 相同 | 相同 | 否 |
http://localhost:8080 vs http://127.0.0.1:8080 | 相同 | 不同 | 相同 | 否 |
跨域限制的表现
当浏览器发起跨域请求时，会受到以下限制：
1. AJAX请求限制
JavaScript
// 前端页面: http://localhost:3000
fetch('http://localhost:8080/api/users')
.then(response => response.json())
.catch(error => console.error('跨域错误:', error));
控制台报错示例：
text
Access to fetch at 'http://localhost:8080/api/users' from origin 'http://localhost:3000'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present.
2. DOM操作限制
无法获取不同源页面的DOM元素，防止恶意网站读取敏感信息。
3. Cookie限制
无法读取或设置不同源的Cookie。
为什么需要同源策略
同源策略防止以下安全威胁：
- CSRF攻击：防止恶意网站伪造用户请求
- XSS信息窃取：防止跨站脚本读取敏感数据
- 点击劫持：防止恶意网站嵌入正常网站进行欺骗
跨域问题的本质
跨域不是请求发不出去，而是浏览器拦截了响应。
实际流程：
- 浏览器发送跨域请求
- 服务器正常接收并返回响应
- 浏览器检查响应头中的CORS信息
- 若不符合要求，浏览器丢弃响应并报错
常见跨域场景
| 场景 | 说明 |
|---|---|
| 前后端分离 | 前端localhost:3000，后端localhost:8080 |
| 多个子域 | a.example.com 访问 b.example.com |
| 开发调试 | 本地开发连接测试服务器 |
| 第三方API | 调用外部服务接口 |
要点总结
- 同源策略要求协议、域名、端口完全一致
- 跨域限制是浏览器行为，服务器不受影响
- 请求发出去了，响应被浏览器拦截
- 同源策略是重要的Web安全机制
📝 发现内容有误？点击此处直接编辑