✅ 什么是同源策略（Same-Origin Policy）？

同源策略是浏览器最核心的安全机制之一，它限制不同源之间的交互行为，防止恶意网站窃取用户数据。

🔑 “同源”的定义：

要满足以下三个条件，两个资源才算是“同源”

条件	示例
协议相同	http vs https ❌ 不同源
域名相同	a.example.com vs b.example.com ❌ 不同源
端口相同	example.com:80 vs example.com:8080 ❌ 不同源

例如：

http://example.com:80
vs
https://example.com:443 → ❌ 不同源

---

🚧 同源策略会限制哪些操作？

操作类型	是否受限	说明
读取 Cookie / LocalStorage	✅ 受限	无法访问其他源的数据
发送 AJAX 请求	✅ 受限	请求可以发出，但响应无法读取（除非 CORS）
DOM 操作	✅ 受限	不同源的页面不能互相操作 DOM
<img src> 请求	❌ 不受限	可以加载不同源的图片
<script src> 请求	❌ 不受限	可用于加载第三方脚本（但存在 XSS 风险）
<link href> 请求	❌ 不受限	样式文件可跨域加载

---

🤯 为什么需要同源策略？

• 防止 CSRF（跨站请求伪造）：你登录着某个网站，另一个恶意站点偷偷发请求窃取你的权限。

• 防止 隐私泄露：通过 iframe、cookie 等手段窃取用户敏感信息。

• 限制第三方脚本的非授权访问。

---

🎯 常见解决方案（跨域）

1. CORS（推荐）
   后端设置响应头 Access-Control-Allow-Origin 等，允许指定源访问。

2. JSONP（仅支持 GET，已过时）
   利用 <script> 不受同源限制的特性。

3. 反向代理（如 Nginx）
   本质：让前端请求看起来是“同源”的路径，比如 /api → 代理到后端服务器

4. PostMessage
   用于 iframe、window 跨源安全通信。

---

🧨 为什么“不是所有跨域都能 CORS”？

有些跨域问题根本不是 CORS 能解决的，下面来看一个案例。

🔍 示例 某些第三方接口不支持 CORS

比如你想访问一个第三方开放接口 https://thirdparty.com/data，但这个接口压根不支持跨域响应头。

即使你发送请求：

fetch('https://thirdparty.com/data')

也会报错：

Access to fetch at 'https://thirdparty.com/data' from origin 'https://yourdomain.com' has been blocked by CORS policy

因为第三方服务没有设置 CORS，你根本无法通过浏览器读取返回的数据。

👉 解决方法：

• 后端中转（如你自己的服务转发请求）

• 或使用服务器代理请求，再将数据返回给前端。

---

🧠 总结

同源策略是浏览器的“护城河”，保护用户免受恶意站点的攻击。想要合理“越过”它，就要了解它！

记住这句话：

“不是所有跨域都能 CORS，代理才是真正的解法。”