同源策略
首先解释：同源策略
同源策略是浏览器最核心也最基本的安全功能，这个策略可以阻止一个页面上的恶意脚本通过页面的DOM对象获得访问另一个页面上敏感信息的权限。
同源，要求URL源的协议，域名，端口完全相同（IE在计算源的时候没有包括端口。）
跨域方法
- jsonp实现跨域
- CORS跨域资源共享
- document.domain+iframe（子域名代理）
- postMessage实现跨域
-
通过jsonp跨域（废弃）
JSONP（JSON with Padding）是资料格式 JSON 的一种“使用模式”，可以让网页从别的网域要资料。
JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。
文档中不受跨域影响的标签有<script><img><iframe>，jsonp是包含json数据的js函数，通过放在<script>标签中插入DOM执行
在js中，我们不可以直接用XMLHttpRequest请求不同域上的数据，但是我们可以在页面上引用不同域的js文件
JSONP的优缺点:
JSONP的优点是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；
它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。
JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；
它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
-
CORS——跨域资源共享
CORS（Cross-Origin Resource Sharing）跨域资源共享，它允许浏览器向跨源服务器，发出XMLHttpRequest2.0版请求，从而克服了AJAX只能同源使用的限制。
参考阮一峰大大的 跨域资源CORS详解
使用"跨域资源共享"的前提，是浏览器必须支持这个功能，而且服务器端必须同意这种"跨域"。如果能够满足上面的条件，则代码的写法与不跨域的请求完全一样。浏览器会自动在请求头部添加origin字段，有时甚至多一次http请求，但是不会对用户造成影响。
xhr.open('GET', 'http://other.server/and/path/to/script');
CORS与JSOP对比：
1、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求
2、 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得
数据，比起JSONP有更好的错误处理。
3、 JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS,CORS更加方便、可靠
-
通过修改document.domain来跨子域
对于主域相同而子域不同的情况，可以通过设置document.domain的办法来解决。如：对于两个文件www.a.com/a.html和 blog.a.com/b.html均加上设置document.domain = ‘a.com’；然后在a.html文件中创建一个iframe，通过iframe两个js文件即可交互数据：
//www.a.com/a.html
<script>
document.doamin = 'a.com';
var iframe = document.createElement('iframe');
iframe.src = 'http://blog.a.com/b.html';
document.body.appendChild(iframe);
iframe.onload = function() {
var doc = iframe.contentDocument || iframe.contentWindow.document;
// 在这里操纵b.html
console.log(doc);
};
</script>
在blog.a.com/b.html内编写代码：
//blog.a.com/b.html
<script>
document.domain = 'a.com';
</script>
备注：某一页面的domain默认等于window.location.hostname。主域名是不带www的域名，例如a.com，主域名前面带前缀的通常都为二级域名或多级域名，例如 blog.a.com其实是二级域名。 domain只能设置为主域名，不可以在blog.a.com中将domain设置为test.a.com
-
postmessage跨域
网友评论