快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容：
创建一个面向初学者的IFRAME跨域教学示例。要求：1) 分步骤演示同源策略 2) 展示常见的跨域错误信息 3) 提供3个最简单的解决方案(JSONP、CORS简单请求、document.domain) 4) 每个方案都有'点击运行'按钮 5) 添加'常见问题'解答区域。使用纯HTML+CSS+JavaScript实现，代码注释要详细易懂，避免使用复杂概念。- 点击'项目生成'按钮，等待项目生成完整后预览效果
最近在做一个项目时需要嵌入第三方页面，结果遇到了经典的IFRAME跨域问题。作为前端新手，当时完全摸不着头脑，经过一番摸索终于搞懂了基本原理。这里把学习过程整理成笔记，希望能帮到同样遇到这个问题的朋友。
- 什么是同源策略？
浏览器出于安全考虑，默认禁止不同源的页面互相访问。所谓"同源"需要同时满足三个条件：协议相同、域名相同、端口相同。比如https://example.com/page1和https://example.com/page2是同源的，但与http://example.com或https://sub.example.com就不同源。
- 跨域错误长什么样？
当你尝试在IFRAME里访问非同源页面的内容时，控制台会报类似这样的错误： "Blocked a frame with origin 'http://your-site.com' from accessing a cross-origin frame"
- 三种基础解决方案
第一种：JSONP方案 利用script标签不受同源策略限制的特性。需要服务端配合返回特定格式的数据，前端通过回调函数获取数据。优点是兼容性好，缺点是只支持GET请求。
第二种：CORS简单请求 在服务端设置Access-Control-Allow-Origin响应头。这是最标准的解决方案，但需要服务端配合修改。适用于现代浏览器环境。
第三种：document.domain 如果两个页面是二级域名关系（如a.example.com和b.example.com），可以通过设置document.domain = 'example.com'来实现跨域。但要求两个页面都主动设置这个属性。
- 常见问题解答
Q：为什么本地开发时没遇到跨域问题？ A：因为浏览器对file://协议有特殊处理，实际部署到服务器后才会出现。
Q：修改document.domain有什么限制？ A：只能设置为当前域名的上级域名，且端口必须一致。
Q：CORS预检请求是什么？ A：对于非简单请求（如带自定义头部的请求），浏览器会先发送OPTIONS请求确认权限。
在实际操作中，我发现InsCode(快马)平台特别适合用来测试这类前端问题。它的在线编辑器可以实时看到效果，还能一键部署测试页面，省去了本地搭建环境的麻烦。对于新手来说，这种所见即所得的方式能更快理解跨域问题的本质。
刚开始可能会觉得跨域问题很复杂，但其实掌握这几个基础方案就能应对大部分简单场景了。建议新手可以先用InsCode创建几个测试页面，亲自体验下不同方案的效果，这样理解会更深刻。
快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容：
创建一个面向初学者的IFRAME跨域教学示例。要求：1) 分步骤演示同源策略 2) 展示常见的跨域错误信息 3) 提供3个最简单的解决方案(JSONP、CORS简单请求、document.domain) 4) 每个方案都有'点击运行'按钮 5) 添加'常见问题'解答区域。使用纯HTML+CSS+JavaScript实现，代码注释要详细易懂，避免使用复杂概念。- 点击'项目生成'按钮，等待项目生成完整后预览效果
