詳解 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>