跨域问题

参考：点击打开链接

点击打开链接

只要协议、域名、端口有任何一个不同，都被当作是不同的域。

浏览器的同源政策会导致跨域：

DOM同源策略：禁止对不同源页面DOM进行操作。不同域名的iframe是限制互相访问的。

XmlHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求。

• 跨域资源共享

CORS（Cross-origin resource sharing）是一个W3C标准，定义了在必须访问跨域资源时，浏览器与服务器应该如何沟通。基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。

对于客户端，正常使用xhr对象发送ajax请求，但是需要设置xhr.withCredentials = true;

对于服务器端，需要在response header中设置Access-Control-Allow-Origin:yourhost.com，Access-Control-Allow-Credentials:true。

• jsonp实现跨域

JSONP（JSON with Padding）是资料格式JSON的一种使用模式，可以让网页从别的网域要资料。JSONP有两部分组成：回调函数和数据，回调函数就是在响应到来时应该在页面中调用的函数，数据就是传入回调函数中的JSON数据。在js中直接用xhr请求不同域上的数据是不可以的，但在页面中引入不同域上的js脚本是可以，jsonp就是利用这个特性实现的。

jQuery中的$.getJSON能很方便的进行jsonp操作，会判断是否跨域，不跨域的话就调用普通的Ajax方法；跨域的话就以异步加载js文件的形式调用jsonp的回调函数。

优缺点：优点是不受同源策略的限制，兼容性更好，不需要xhr或ActiveX的支持，并且请求完毕后可以通过调用callback传回结果；缺点是只支持GET请求，只支持跨域HTTP请求，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

CORS与JSONP相比，更加先进、方便和可靠。

JSONP只能实现GET请求，CORS支持所有类型的HTTP请求；使用CORS可以使用普通的xhr发起请求和获得数据，有更好的错误处理；绝大多数现代浏览器都已经支持CORS。

• 服务器代理

浏览器有跨域限制，但是服务器不存在跨域问题，所以可以由服务器请求所要域的资源再返回给客户端。

• document.domain来跨子域

不同的框架之间是可以获取window对象的，却无法获取相应的属性和方法。例如：页面http://example.com/a.html中有一个iframe http://example.com/b.html，这个页面与它的iframe框架是不同域的，所以无法通过在页面中写js代码来获取iframe中的东西。只要把这两个页面的document.domain都设成相同的域名就可以了，但只能把document.domain设置成自身或更高一级的父域，且主域必须相同。document.domain只适用于不同子域的框架间的交互。

• 使用window.name进行跨域

window对象有个name属性，在一个窗口的生命周期内，窗口载入的所有页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的。window.name跨域同样受到同源政策限制，父框架和子框架的src必须指向同一域名。

• location.hash跨域

子框架修改父框架src的hash值，通过这个属性进行传递数据，且更改hash值页面不会刷新。但是传递的数据的字节数是有限的。

• 使用postMessage实现页面之间通信

window对象的postMessage()方法允许有限的通信——通过异步消息传递的方式——在来自不同源的脚本之间。这类通讯机制是在HTML5标准中定义的，所有主流浏览器（包括IE8+）都已经实现该通讯机制。