快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容：
生成一个新手教学项目：1.用可视化方式展示同源策略原理 2.分步骤演示5种解决方案：a)document.domain b)postMessage c)CORS d)代理iframe e)JSONP 3.每个方案配示意图和简单代码示例 4.添加交互式练习区。要求输出适合初学者的Markdown格式文档。 - 点击'项目生成'按钮，等待项目生成完整后预览效果
作为一名前端开发新手，最近在学习iframe嵌入页面时遇到了跨域问题，经过一番摸索终于搞明白了原理和解决方法。今天就用最通俗的方式分享给大家，希望能帮到同样困惑的朋友们。
1. 同源策略是什么？
浏览器有个安全规则叫同源策略，简单说就是：只有当两个页面的协议、域名、端口完全相同时，才能互相访问DOM或数据。就像小区门禁，只有本楼住户才能进别人家串门。
2. 五种解决方法详解
方法一：document.domain降域
适用于主域相同子域不同的场景，比如a.example.com和b.example.com。原理就像两家住同一个小区不同楼，只要把门禁卡权限都改成小区级别就能互相访问了。
- 父页面和iframe页面都设置
document.domain = 'example.com' - 注意：只能设置为当前域或其父域，且必须显式设置
方法二：postMessage通信
这是最推荐的现代解决方案，就像两个邻居通过对讲机传纸条。
- 父窗口用
iframe.contentWindow.postMessage()发送消息 - iframe内通过
window.addEventListener('message')接收 - 消息内容可以是任意可序列化数据
- 记得验证消息来源确保安全
方法三：CORS跨域资源共享
需要服务端配合，相当于对方小区主动给你发了通行证。
- 服务端设置
Access-Control-Allow-Origin响应头 - 可以精确控制允许哪些域访问
- 对于复杂请求还需要预检(OPTIONS)请求
方法四：代理iframe
自己搭建个中转站，就像请物业帮忙传递物品。
- 在同源服务器上创建代理页面
- 代理页面加载跨域内容后传给主页面
- 需要额外服务器支持
方法五：JSONP
老式解决方案，利用script标签不受同源限制的特性。
- 动态创建script标签加载跨域URL
- 服务端返回JavaScript函数调用
- 只支持GET请求
- 逐渐被CORS取代
3. 方案选择建议
- 同子域优先用
document.domain - 现代项目首选
postMessage - 有服务端控制权时用CORS
- 临时方案可用JSONP
- 复杂场景考虑代理
4. 实际体验建议
我在InsCode(快马)平台上测试这些方案时特别方便，不需要自己搭建环境就能快速验证效果。他们的在线编辑器支持实时预览，还能一键部署演示页面，特别适合新手做技术验证。
作为初学者，我觉得理解原理后最重要的就是动手实践。建议大家每种方法都实际操作一遍，遇到问题随时在社区交流，进步会非常快！
快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容：
生成一个新手教学项目：1.用可视化方式展示同源策略原理 2.分步骤演示5种解决方案：a)document.domain b)postMessage c)CORS d)代理iframe e)JSONP 3.每个方案配示意图和简单代码示例 4.添加交互式练习区。要求输出适合初学者的Markdown格式文档。 - 点击'项目生成'按钮，等待项目生成完整后预览效果
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
