JavaScript 跨域问题的几种解决方法

一、什么是跨域

  相同域名、相同网络协议、相同端口，三者都满足就是同一个域，否则就是跨域。

二、为什么会产生跨域问题

  JavaScript出于安全方面的考虑，是不允许跨域调用其他页面的对象的（同源策略 Same-Origin Policy）。当我们用浏览器中打开网页，执行一个脚本的时候会检查这个脚本属于哪个页面的，即检查是否同源，只有同源的脚本才会被执行，如果没有同源策略，那随便的注入一个js脚本，弹个恶意广告，通过js窃取信息，就很不安全了。

  然而我们经常把网站的一些脚本、图片或其他资源放到静态服务器，页面可以更快的加载，而且减少了Web服务器的压力。或者系统间跨域接口，进行数据传递。这就产生了跨域问题。

http://www.a.com/a.js 访问以下URL的结果

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

三、如何解决跨域问题

1、跨域代理

  一种简单的办法，就是把跨域的工作交给服务器，从后台获取其他站点的数据再返回给前台，也就是跨域代理（Cross Domain Proxy）。这种方法似乎蛮简单的，改动也不太大。不过就是http请求多了些，响应慢了些，服务器的负载重了些。

2、XHR2

  HTML5中提供的XMLHTTPREQUEST Level2（及XHR2）已经实现了跨域访问。但IE10以下不支持，只需要在服务端填上响应头：

header("Access-Control-Allow-Origin:*"); /*星号表示所有的域都可以接受，*/header("Access-Control-Allow-Methods:GET,POST");

3、通过jsonp实现跨域

• 服务端：

$data = json_encode(array('msg'=>'msg....'));die( $_REQUEST['function_name_index'].'('.$data.')' );

• ajax请求：

 <script>    $.ajax({        url:'http://192.168.1.124/homekoo.com/zde/cors_1.php',        dataType:'jsonp',        jsonp:'function_name_index',        jsonpCallback:'function_name',        success:function(data){        alert(data.msg);        }    });</script>

  JSONP的最基本的原理是：动态添加一个src标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与ajax XmlHttpRequest协议无关了。

4、 通过CORS实现跨域

四、后记

本文仅用于记录学习笔记。初始版本比较粗糙,后续会不断完善。

五、参考资料

• [x] 解决ajax跨域的方法原理详解_cnsd
• [x] Ajax跨域问题的两种解决方法 _博客园