前端跨域知识总结

2018-01-18 在 Dynamsoft 市场部例会上所做分享的部分内容

目录

• 一、 什么是跨域？
• 二、通过 document.domain 跨域
• 三、通过 location.hash 跨域
• 四、通过 HTML5 的 postMessage 方法跨域
• 五、通过 window.name 跨域
• 六、通过 jsonp 跨域
• 七、通过 CORS 跨域
• 八、Demo 代码

一、 什么是跨域？

跨域从字面意思看，就是跨域名，但实际上跨域的范围绝对不止那么狭隘。具体概念如下：只要协议、域名、端口有任何一个不同，都被当作是不同的域。之所以会产生跨域这个问题呢，其实也很容易想明白，要是随便引用外部文件，不同域名、不同 ip 下的页面能随意引用彼此的文件的话，浏览器是很容易懵逼的，安全也得不到保障了。但在安全限制的同时也给注入 iframe 或是 ajax 应用上带来了不少麻烦。所以我们要通过一些方法使本域的 js 能够操作其他域的页面对象或者使其他域的 js 能操作本域的页面对象（iframe 之间）。下面是具体的跨域情况详解：

**URL**	**说明**	**是否允许通信**
http://www.a.com/a.js	同一域名下的文件	允许
http://www.a.com/b.js
http://www.a.com/lab/a.js	同一域名下不同文件夹	允许
http://www.a.com/script/b.js
http://www.a.com:8000/a.js	同一域名，不同端口	不允许
http://www.a.com/b.js
http://www.a.com/a.js	同一域名，不同协议	不允许
https://www.a.com/b.js
http://www.a.com/a.js	域名和域名对应ip	不允许
http://70.32.92.74/b.js
http://www.a.com/a.js	主域相同，子域不同	不允许（cookie这种情况下也不允许访问）
http://script.a.com/b.js
http://www.a.com/a.js	同一域名，不同二级域名（同上）	不允许（cookie这种情况下也不允许访问）
http://a.com/b.js
http://www.cnblogs.com/a.js	不同域名	不允许
http://www.a.com/b.js