同源策略（Same-Origin Policy） 是浏览器最核心的安全机制之一，用于限制不同源的网页脚本（如 JavaScript）之间的交互，防止恶意网站窃取用户数据或发起攻击。
1. 什么是“同源”？
两个 URL 的 协议（Protocol）、域名（Domain）、端口（Port） 必须完全相同，才属于同源。
示例：
| URL A | URL B | 是否同源 | 原因 |
|---|---|---|---|
https://example.com | https://example.com | ✅ 是 | 协议、域名、端口一致 |
https://example.com | http://example.com | ❌ 否 | 协议不同（HTTPS vs HTTP） |
https://example.com:443 | https://example.com:8080 | ❌ 否 | 端口不同（443 vs 8080） |
https://sub.example.com | https://example.com | ❌ 否 | 域名不同（子域名 vs 主域名） |
2. 同源策略的限制范围
浏览器会阻止跨源访问以下内容：
- DOM 访问：不同源的页面无法通过 JavaScript 读取对方的 DOM（如
iframe内容）。 - Cookie/LocalStorage：无法读取或修改其他源的 Cookie 或本地存储。
- AJAX 请求：默认禁止向不同源的服务器发送 AJAX 请求（Fetch/XMLHttpRequest）。
- Web Workers 脚本：加载其他源的脚本可能被限制。
3. 如何绕过同源策略？如何解决跨域问题？
浏览器基于 同源策略 限制网页脚本跨域访问资源，解决跨域的核心是通过安全机制让服务器和浏览器协同允许特定跨域请求。 需在安全可控的前提下实现跨源通信：
| 方法 | 原理 | 适用场景 |
|---|---|---|
| CORS（跨源资源共享） | 服务器通过 HTTP 头（如 Access-Control-Allow-Origin）声明允许的源。 | 主流跨域 API 请求（如 AJAX）。 |
| JSONP | 利用 <script> 标签不受同源策略限制的特性，通过回调函数获取数据。 | 兼容旧浏览器的简单 GET 请求。 |
| postMessage | 通过 window.postMessage() 在不同源的窗口间传递消息（需双方协作）。 | 跨域 iframe 或窗口通信。 |
| 代理服务器 | 前端请求同源代理服务器，由代理转发请求到目标服务器并返回结果。 | 无法修改目标服务器时的临时方案。 |
| WebSocket | WebSocket 协议默认支持跨域通信（需服务器允许）。 | 实时双向通信（如聊天室）。 |
6. 面试回答示例
“同源策略是浏览器限制不同源的脚本交互的安全机制。只有协议、域名、端口完全相同的 URL 才同源。它阻止跨源读取 DOM、Cookie 或发送 AJAX 请求，但允许嵌入跨源资源（如图片、脚本）。实际开发中通过 CORS、JSONP 或代理服务器实现安全跨域通信。”
快速记忆口诀
同源策略三要素：协议、域名、端口全相同。
跨域限制保安全，CORS、JSONP 来打通。
