标签：postMessage hash 跨域 window iframe 页面
跨域问题
问题：什么是跨域？
跨域问题的来源是浏览器的安全机制，同源策略。
同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。
这是一个用于隔离潜在恶意文件的重要安全机制
也就是说，接口返回的数据被浏览器阻隔了。在用其他测试工具测试接口数据时，是可以看到数据返回的。
解决方案
- JSONP
- document.domain + iframe
- location.hash + iframe
- window.name + iframe
- postMessage
- Nginx 配置反向代理
- CORS（跨域资源共享）
1. JSONP 跨域方案
原理：通过利用 img、script、link 标签的 src 或 href 属性来实现。
( 在上述标签中，通常会请求一个同源的文件，但这些文件都没有被同源策略拦截 )
※ JSONP 跨域只能用于 get 方法
2. document.domain + iframe
document.domain 用于获取当前网页的域名
前提条件：两个域名必须属于同一个一级域名，所用到的协议、端口号都要一致
( 一级域名必须保持一致 )
常用需求：将当前页面下的图片上传到同源路径下的 img 文件夹
实现方法：
- 将页面 document.domain 的值设置为当前域名的一级域名
- 创建 iframe，并在 iframe 挂上 load 事件监听，进行上传图片
3. location.hash + iframe
location.hash 用于获取url地址栏中锚点（#）后的数据
通过iframe将需要传值的页面嵌套入当前页面，并给其附上hash值，传值页面需要根据其自身的hash值进行处理，并通过上述方法将新的hash值传回给原页面。
4. window.name + iframe
window.name 只要在一个window下，无论url怎么变化，只要设置好了
window.name，之后都不会被改变。
即在iframe中，即使url在变化，iframe中的window.name也是一个固定的值。利用这点，即可实现跨域
5. postMessage
在HTML5中新增了
postMessage方法，postMessage可以实现跨文档消息传输。目前IE8、Firefox3、Opera9、Chrome3和Safari4都支持
postMessage
该方法能解决的跨域场景问题：
- 页面和其打开的新窗口的数据传递
- 多窗口之间消息传递
- 页面与嵌套的iframe消息传递
5.1 用法
postMessage(data, origin) 方法接收两个参数
-
data
HTML5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时需用
JSON.stringify()进行序列化 -
origin
协议 + 主机 + 端口号
也可以设置为
*，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为/
6. vue-cil 代理跨域
该方案适用于使用vue-cil脚手架搭建的框架
打开 config 文件夹下的 index.js，并在 proxyTable 字段中加入以下代码
'/api': {
// 这里后台的地址模拟的;应该填写你们真实的后台接口
target: 'http://192.168.50.99:8080',
ws: false, // 是否使用了websocket
// 允许跨域
changOrigin: true,
pathRewrite: {
// 请求的时候使用这个api就可以
'^/api': ''
}
}
设置完成后，在axios封装文件（request.js）中将 baseUrl 设置为：
'/api'
即可完成跨域
如何在get方法中传入自定义头部数据
需要BE同事在代码中允许FE传输自定义头部字段。
标签：postMessage,hash,跨域,window,iframe,页面 来源： https://www.cnblogs.com/CreateBox/p/15196012.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。