【Javascript】搞定JS面试——跨域问题

1. 什么是跨域？
2. 为什么不能跨域？
3. 跨域的解决方案都有哪些（解决方法/适用场景/get还是post）?

 一、什么是跨域?

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

 

       

二、为什么不能跨域？

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

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

     具体详情请查看：  http://www.cnblogs.com/alvinwei1024/p/4626054.html 

三、跨域的解决方案

     1、JSONP          

解决方法	0）浏览器是可以引入不同域下的JS文件，利用这个特性，来实现跨域。 1）直接在a.com页面，添加一个script标签，src属性为b网站的页面url， 并且传入一个callback参数。 <script> function dosomething(jsonData){ } </script> <script src="http://www.b.com/handlerData.php? callback=dosomething"></script> 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", "*"); ---“*”号表示允许任何域向我们的服务端提交请求
应用场景	跨域post提交数据
请求方式	post
参考链接	详细介绍请查看： http://www.cnblogs.com/Darren_code/p/cors.html http://www.ruanyifeng.com/blog/2016/04/cors.html