「Javascript」搞定JS面试——跨域问题

一、什么是跨域?

只要协议、域名、端口有任何一个不同，就是跨域。

二、为什么不能跨域？

浏览器有一个同源策略，用来保护用户的安全。

如果没有这个策略的话，a网站就可以操作b网站的页面，这样将会导致b网站的页面发生混乱，甚至信息被获取，包括服务器端发来的session。

三、跨域的解决方案

1、JSONP
解决方法

0）浏览器是可以引入不同域下的JS文件，利用这个特性，来实现跨域。

1）直接在a.com页面，添加一个script标签，src属性为b网站的页面url，并且传入一个callback参数。

<script> function dosomething(jsonData){

2）b网站的handlerData.php，实际做的操作就是：生成一段可执行的JS代码，调用你传入的dosomething函数。

详细介绍：http://www.cnblogs.com/2050/p/3191744.html
应用场景 常用的解决方案
请求方式 get ：它本质上是下载一个资源文件。

2、document.domain
应用场景

必须满足两个条件

1）页面中嵌入firame框架。

2）当前页面和iframe中的页面，主域、协议、端口必须完全一致。
解决方法

比如页面地址是http://a.baidu.com/，嵌入的iframe是 http://b.baidu.com/

分别设置页面和iframe的document.domain为： baidu.com，就可以解决问题。

3、使用H5中的window.postMessage
解决方法

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它

的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、

Opera等浏览器都已经支持window.postMessage方法。
应用场景

1）页面和其打开的新窗口的数据传递

2）.多窗口之间消息传递

3）.页面与嵌套的iframe消息传递

详细介绍：http://www.cnblogs.com/dolphinX/p/3464056.html

4、CORS方案
解决方法

CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用

向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。

header("Access-Control-Allow-Origin", "*");