前端同源与跨域简述

1. 同源策略（SOP）

浏览器安全机制：

协议 + 域名 + 端口 三者完全一致，才算同源

http://a.com:80
http://a.com:80   ✅ 同源

http://a.com
https://a.com     ❌ 协议不同

http://a.com
http://b.com      ❌ 域名不同

限制：

• JS 不能读取跨域接口返回数据
• 不能访问跨域 Cookie / LocalStorage
• 不能操作跨域 iframe DOM

---

2. 跨域

只要协议、域名、端口任一不同：

前端：
http://web.com

接口：
http://api.web.com

=> 跨域

本质：浏览器限制，不是网络限制curl、Postman 可以访问。

---

3. 常见解决方式

3.1CORS（主流）

服务器允许：

Access-Control-Allow-Origin: http://web.com

复杂请求：

浏览器
  |
 OPTIONS预检
  |
服务器允许
  |
正式请求

---

2.反向代理（生产常用）

浏览器
  |
 Nginx
  |
 后端API

例如：

location /api {
    proxy_pass http://backend;
}

前端只访问：/api/user无跨域

---

3.JSONP（老方案）

利用：

<script src="">

特点：

• 只支持 GET
• 已基本淘汰

---

4. 总结

方式	使用场景
CORS	前后端分离接口调用
Nginx代理	企业生产环境常用
JSONP	老项目兼容

核心：

同源策略保护浏览器安全，CORS和代理用于安全地放开跨域。