JavaScript（三十六）js跨域方法

一、跨域概述

JS跨域是指通过js在不同的域之间进行数据传输或通信，如Ajax向一个不同的域请求数据，或者通过JS获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，即为不同的域；

网址是  http://baidu.com:8080?user=name&pwd=password
http:        协议
baidu.com    域名  (注意：www.baidu.com不是域名)
8080         端口
user=name&pwd=password 地址带的参数

注意：在Js中直接使用XMLHttpRequest(Ajax)请求不同域上的数据，是不能实现的

举例：相对http://store.company.com/dir/page.html同源检测的结果：

二、Jsonp跨域 

在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。

比如，有个a.html页面，它里面的代码需要利用ajax获取一个不同域上的json数据，假设这个json数据地址是http://example.com/data.php,那么a.html中的代码就可以这样：

跨域原理：

这里的json数据是被当做js文件通过script标签引入的，（http://example.com/data.php返回的必须是一个能执行的js文件） ，这个js文件载入成功后会执行url参数中指定的gaindata函数，并且会将json数据作为参数传入函数中。 

PHP代码：

 通过jsonp跨域原理，可以用js动态生成script标签进行跨域操作。若页面使用jquery，那么通过其封装的方法很方便的进行jsonp操作。

<script>
$.getJSON('http://example.com/data.php?callback=?',function(jsondata){
        //处理获得的json数据

    })
</script>

原理一样，只是jquery会自动生成一个全局函数替换callback=？中的问号，之后获取到的数据又会自动销毁，即是一个临时函数的作用。$getJSON方法会自动判断是否跨域，不跨域，就调用普通的ajax方法，跨域，则会以异步加载js文件的形式来调用jsonp的回调函数。

三、CORS跨域

跨域原理：

CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。CORS原理只需要向响应头header中注入Access-Control-Allow-Origin：*（*指任意域），页面进行正常的ajax请求即可，这样浏览器检测到header中的Access-Control-Allow-Origin，则就可以跨域操作了。