AJAX跨域请求和CORS跨域资源共享

来源：互联网发布：js 动画效果百叶窗编辑：程序博客网时间：2024/04/29 16:56

同源策略限制：

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果没有同源策略，攻击者可以通过JavaScript获取你的邮件以及其他敏感信息，比如说阅读私密邮件，发送虚假邮件，查看聊天记录等等。所谓同源是指，协议，域名，端口相同。三者只有有一个不相同，就认为不同源！

例如：域：http://store.company.com/dir/index.html

协议不同：https://store.company.com/dir/index.html
端口不同：http://store.company.com:81/dir/index.html
主机名不同：http://news.company.com/dir/index.html

跨域请求：

1. 对于主域相同而子域不同的例子，可以通过设置document.domain的办法来解决。

ajax不允许跨子域请求，但是iframe可以！可以通过提升域的方法来实现。

例如www.a.com/a.html和a.com/b.html为例，只需在a.html中添加一个b.html的iframe，并且设置两个页面的document.domain都为’a.com’（只能为主域名），两个页面之间即可互相访问了。

如果b.html要访问a.html，可在子窗口（iframe）中通过window.parent来访问父窗口的window对象。

例如www.a.com/a.html中的script：

document.domain='a.com';//提升域varifr = document.createElement('iframe');ifr.src = 'http://a.com/b.html';ifr.style.display = 'none';document.body.appendChild(ifr);ifr.onload = function(){  //获取iframe的document对象  //W3C的标准方法是iframe.contentDocument，  //IE6、7可以使用document.frames[ID].document  //为了更好兼容，可先获取iframe的window对象iframe.contentWindow  vardoc = ifr.contentDocument || ifr.contentWindow.document;  // 在这里操纵b.html  alert(doc.getElementById("test").innerHTML);

而a.com/b.html:

<!DOCTYPE ><html><head><title></title><scripttype="text/javascript">  document.domain='a.com';//提升域</script></head><body><h1id="test">Hello World</h1></body></html>

但是，这种方法只支持同一根域名下的页面！baidu.com和google.com的话，想想就好(●’◡’●)

复习：本来在同一个 origin 下，父页面可以通过 iframe.contentWindow 直接访问 iframe 的全局变量、DOM 树等，iframe 可以也通过 parent/top 对父页面做同样的事情。

不同 origin 下，还有一种标准的方法是通过HTML5的 .postMessage() 互相通信，不标准的方法是利用 location.hash 等奇技淫巧。

JSONP：

JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

原理：含有src属性的标签都可以跨域，如img、script、iframe！

本质：只是执行了javascript脚本！

简单来说，就是在客户端声明回调函数之后，客户端通过script标签向服务器跨域请求数据，然后服务端返回相应的数据并动态执行回调函数（返回带数据参数的回调函数的字符串，在客户端刚好被动态执行了！）。

看实例：

<script type="text/javascript">      function jsonpCallback(result) {          alert(result);      }      var JSONP=document.createElement("script");      JSONP.type="text/javascript";      JSONP.src="你的请求地址?callback=jsonpCallback";//在请求的地址后面带上回调函数，客户端声明的jsonpCallback      document.getElementsByTagName("head")[0].appendChild(JSONP);  </script>

或者：

<script type="text/javascript">      //注意：这个回调函数需要声明在前，js链接调用在后！    function jsonpCallback(result) {          alert(result);      }  </script>  <script type="text/javascript" src="你的请求地址?callback=jsonpCallback"></script>

后台返回的大概结果：

jsonpCallback({a:1,b:2});//类似的字符串，在js脚本中可以被动态执行，此来就可以拿到数据啦

但是，相应的弊端也出现了！这种方法每当页面加载就执行，而不是按事件触发去动态执行的！因而出现了jsonp的封装，在需要的时候动态调用！

jsonp封装：

大概形式：jsonp(url,data,callback)

大概步骤思路：

动态添加script标签，并将其加入页面中
组装传入的数据参数data
给每个回调函数唯一命名，设置回调请求成功或失败之后的处理
最后无论请求成功还是失败，都要删除创建的javascript标签。

示例：（转自博文自己封装的JSONP跨域函数：http://blog.csdn.net/liusaint1992/article/details/50959571）

function JSONP(url,config){      var data = config.data || [];      var paraArr=[],paraString='';//get请求的参数。      var urlArr;      var callbackName;//每个回调函数一个名字。按时间戳。      var script,head;//要生成script标签。head标签。      var supportLoad;//是否支持 onload。是针对IE的兼容处理。      var onEvent;//onload或onreadystatechange事件。      var timeout = config.timeout || 0;//超时功能。      for(var i in data){          if(data.hasOwnProperty(i)){              paraArr.push(encodeURIComponent(i) + "=" +encodeURIComponent(data[i]));          }      }      urlArr = url.split("?");//链接中原有的参数。      if(urlArr.length>1){          paraArr.push(urlArr[1]);      }      callbackName = 'callback'+new Date().getTime();      paraArr.push('callback='+callbackName);      paraString = paraArr.join("&");      url = urlArr[0] + "?"+ paraString;      script = document.createElement("script");      script.loaded = false;//为了实现IE下的onerror做的处理。JSONP的回调函数总是在script的onload事件（IE为onreadystatechange）之前就被调用了。因此我们在正向回调执行之时，为script标签添加一个属性，然后待到onload发生时，再检测有没有这个属性就可以判定是否请求成功，没有成功当然就调用我们的error。      //将回调函数添加到全局。      window[callbackName] = function(arg){          var callback = config.callback;          callback(arg);          script.loaded = true;      }      head = document.getElementsByTagName("head")[0];      head.insertBefore(script, head.firstChild) //chrome下第二个参数不能为null      script.src = url;      supportLoad = "onload" in script;      onEvent = supportLoad ? "onload" : "onreadystatechange";      script[onEvent] = function(){          if(script.readyState && script.readyState !="loaded"){              return;          }          if(script.readyState == 'loaded' && script.loaded == false){              script.onerror();              return;          }          //删除节点。          (script.parentNode && script.parentNode.removeChild(script))&& (head.removeNode && head.removeNode(this));            script = script[onEvent] = script.onerror = window[callbackName] = null;      }      script.onerror = function(){          if(window[callbackName] == null){              console.log("请求超时，请重试！");          }          config.error && config.error();//如果有专门的error方法的话，就调用。          (script.parentNode && script.parentNode.removeChild(script))&& (head.removeNode && head.removeNode(this));            script = script[onEvent] = script.onerror = window[callbackName] = null;      }      if(timeout!= 0){          setTimeout(function() {              if(script && script.loaded == false){                  window[callbackName] = null;//超时，且未加载结束，注销函数                  script.onerror();                             }          }, timeout);      }  }

jQuery中对JSONP的实现：

jQuery中提供了两个方法来实现：$.getJSON()和$.ajax(),常用的是底层的$.ajax()方法！

1.$.getJSON()：

$.getJSON(url?jsoncallback=?,data,fn(data){…})

关键点：在url后带上参数jsoncallback=?，后台返回随机命名的callback函数！会被Jquery自动替换成回调方法的名称!

<script type="text/javascript"> $.getJSON("http://localhost:3856/GetItemCates.ashx/GetItemCats?gateid=20&format=json&jsoncallback=?", function (data) {  var myprops = data.itemcats_get_response.item_cats.item_cat;            $.each(myprops, function (index, item) { $("ul").append("<li>" + item.name + "," + item.cid + "</li>") });        }        );</script>

2. $.ajax():

$.ajax({
url: url,
data: data,
dataType : “jsonp”,
jsonp: “jsoncallback”,
jsonpCallback:”success_jsonpCallback”,
success: callback
});

 $.ajax({     type : "get", //jquey是不支持post方式跨域的     async:false,     url :"http://api.taobao.com/apitools/ajax_props.do", //跨域请求的URL     dataType : "jsonp",//传递给请求处理程序，用以获得jsonp回调函数名的参数名(默认为:callback)     jsonp: "jsoncallback", //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名     jsonpCallback:"success_jsonpCallback",//成功获取跨域服务器上的json数据后,会动态执行这个callback函数     success : function(json){              alert(json);     }});

以上的jsonp和jsonpCallback可以自定义回调函数名和参数名！

注意：

需要服务器端的支持才行。
只支持get请求

CORS跨域资源共享（真正跨域）

跨域资源共享（CORS ）是一种网络浏览器的技术规范，它为Web服务器定义了一种方式，允许网页从不同的域访问其资源。 CORS就是为了让AJAX可以实现可控的跨域访问而生的

CORS与JSONP相比:

JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。
使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
JSONP主要被老的浏览器支持，但它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。

本质是HTML5 xhr level2原生ajax请求！

只需要在后台中加上响应头来允许域请求！在被请求的Response header中加入以下设置，就可以实现跨域访问了！

//指定允许其他域名访问'Access-Control-Allow-Origin:*'//或指定域//响应类型'Access-Control-Allow-Methods:GET,POST'//响应头设置'Access-Control-Allow-Headers:x-requested-with,content-type'

后台的娃助我(●’◡’●)

总结：整理了同源策略限制，出现了跨域请求的需求，原生传统的跨域请求方式，原生js和jQuery中对跨域的处理（JSONP）,以及HTML5 中的CORS跨域资源共享。系统条理得梳理好传说中的跨域了！o(^▽^)o

0 0