详解 JSONP跨域请求的实现

      跨域问题是因为浏览器为了防止CSRF攻击(Cross-site request forgery跨站请求伪造)，避免恶意攻击而带来的风险而采起的同源策略限制。当一个页面中使用XMLHTTPRequest（XHR请求）对象发送HTTP请求时，必须保证当前页面和请求的对象是同源的，即协议、域名和端口号要彻底一致，不然浏览器就会阻止此跨域请求返回的数据。

 

例如:

    http://www.a.com 与 https://www.a.com 是不一样源的，它们协议不一样

    http://www.a.com 与 http://www.b.com 是不一样源的，它们域名不一样

     http://www.a.com：80 与 http://www.a.com：8080 是不一样源的，它们端口号不一样

     http://www.a.com/test1.js 与 http://www.a.com/test2.js 是同源的

跨域请求的解决方案

     虽然同源限制能够有效的防止网络上的恶意攻击，可是在实际开发应用中，咱们每每须要从本站点向第三方站点发送XHR请求，这就须要有效的解决跨域问题，能够有如下几种：

     (1)JSONP：只支持GET，不支持POST请求代理：使用代理去避开跨域请求，例如www.a.com/index.html页面去调用www.b.com/service.jsp，能够经过写一个接口www.a.com/service.jsp,由这个接口在后端去调用www.b.com/service.jsp并取到返回值，而后再返回给index.html。

     (2)服务端修改：例如在服务端页面添加header限制： 

    header('Access-Control-Allow-Origin:*'); //容许全部来源访问

    header('Access-Control-Allow-Method:POST,GET'); // 容许访问的方式

    因为JSONP是最灵活，也是最经常使用的方式，这里主要讲解JSONP方式解决跨域问题。

 JSONP原理

      浏览器只对XHR(XMLHttpRequest)请求有同源请求限制，而对script标签src属性、link标签ref属性和img标签src属性没有这这种限制，利用这个“漏洞”就能够很好的解决跨域请求。JSONP就是利用了script标签无同源限制的特色来实现的，当向第三方站点请求时，咱们能够将此请求放在<script>标签的src属性里，这就如同咱们请求一个普通的JS脚本，能够自由的向不一样的站点请求：

<script src="http://www.b.com/request?para1=1"></script>

JSONP请求实现

 

(1)Javascript实现

服务端：

public void ProcessRequest(HttpContext context) {

      context.Response.ContentType = "text/plain";

      //指定的回调函数名称

     String callbackFuncName = context.Request.QueryString["callback"];

     String reponseData = "test jsonp";

      //回调脚本

     String scriptContent = callbackFuncName + "('" + reponseData + "'"; 

     context.Response.Write(scriptContent); 

  }

前端：

<script type="text/javascript" src="http://localhost/Service.ashx?callback=jsonpCallback" />

   //回调函数

   function jsonpCallback(content){ 

   alert(content); } 

</script>

  运行的结果显示test jsonp,能够看出整个过程：

  script标签设置src属性为请求的地址，并判断回调函数做为参数服务端构建JS脚本，传递返回给客户端的数据客户端在回调函数中解析服务器生成的数据

(2)JQuery实现

 

 JQuery的ajax方法对JSONP方法进行了封装，使用JQuery提供的方法变得很是简单

 前端：

<script type="text/javascript">

    $.ajax({ 

     type: "get",

     async: false, 

     url: "http://localhost:8546/Service.ashx", 

     dataType: "jsonp", 

    success: function (data) { 

       alert(data);

      }, 

    error: function () { 

       alert('fail');

     } 

   }); 

</script>