跨域解決方案二：使用JSONP實現跨域

阿新 • • 發佈：2019-01-17

跨域的實現方式有多種，除了上篇文章提到的CORS外，常見的還有JSONP、HTML5、Flash、iframe、xhr2等。

這篇文章對JSONP的跨域原理進行了探索，並將我的心得記錄在這裡和大家分享。

JSONP跨域原理探祕

我們知道，使用 XMLHTTPRequest 物件傳送HTTP請求時，會遇到同源策略問題，域不同請求會被瀏覽器攔截。

那麼是否有方法能繞過 XMLHTTPRequest 物件進行HTTP跨域請求呢？

換句話說，不使用 XMLHTTPRequest 物件是否可以傳送跨域HTTP請求呢？

細心的你可能會發現，像諸如：

這種標籤是不會遇到"跨域"問題的，嚴格意義上講，這不是跨域，跨域是指在指令碼程式碼中向非同源域傳送HTTP請求，這只是跨站資源請求。

那麼，我們是否可以利用跨站資源請求這一方式來實現跨域HTTP請求呢？

以<script></script>標籤為例進行探索，先看一段程式碼：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jsonp demo</title>
    <!-- JavaScript片斷1 -->
    <script type="text/javascript">
        function handler(data) {
            alert(data);
            // our code here...
        }
    </script>

    <!-- JavaScript片斷2 -->
    <script type="text/javascript">
        handler('success');
    </script>
</head>
<body>
    A JSONP demo.
</body>
</html>

這段程式碼中，有2個JavaScript片斷，第1個片斷中定義了一個處理函式handler()，這個處理函式比較簡單，沒有對資料做任何處理，只是把它alert出來；第2個片斷呼叫了它，執行這個頁面瀏覽器會彈出"success"。

我們假設第2個JavaScript片斷儲存在別的地方，然後我們使用<script src="" />的方式把它引入進來，像這樣：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jsonp demo</title>
    <!-- JavaScript片斷1 -->
    <script type="text/javascript">
        function handler(data) {
            alert(data);
            // our code here...
        }
    </script>

    <!-- JavaScript片斷2 -->
    <script type="text/javascript" src="http://service.a.com/script/1.js"></script>
</head>
<body>
    A JSONP demo.
</body>
</html>

service.a.com/script/1.js：

handler('success');

這種方法和把JavaScript程式碼直接寫在頁面是等效的，但是，我們由此可以聯想到什麼？

我們是否可以事先在本頁面定義處理程式，服務端返回JS指令碼，指令碼的內容就是對處理程式的回撥，服務返回的資料通過引數的形式傳回：

handler('服務返回的資料');

然後通過動態向當前頁面head節點新增<script src="服務地址"></script>節點的方式來“偽造”HTTP請求？

於是，可以編寫這樣一個簡單的測試用例：

先寫服務端，非常簡單的一個服務，返回字串"Hello World"，一般處理程式Service.ashx:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace JSONPDemo.Service
{
    /// <summary>
    /// Service2 的摘要說明
    /// </summary>
    public class Service2 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write("handler('Hello World');");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

再寫客戶端，一個簡單的靜態Web頁，index.html:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        // 跨域傳送HTTP請求，從服務端獲取字串"Hello World" 
        function getHello() {
            var script = document.createElement('script');
            script.setAttribute('src', 'http://localhost:8546/Service.ashx');
            document.querySelector("head").appendChild(script);
        }
        // 處理函式
        function handler(data) {
            alert(data);
            // our code here...
        }
    </script>
</head>
<body>
    <input type="button" value="傳送跨域HTTP請求，獲取Hello World" onclick="getHello()" />
</body>
</html>

測試成功！

在這個測試例子中，我們使用一般處理程式編寫了一個簡單的返回Hello World的服務，然後使用動態建立<script></script>節點的方式實現了跨域HTTP請求。

由於<script>、<img>標籤資源請求是非同步的，所以我們就實現了一個跨域的非同步HTTP請求。

但是這麼做是不夠的，一個頁面可能會有多個HTTP請求，而上面這個示例的處理程式只有一個——handler。

不同的請求應該由不同的處理程式來處理，對上面的程式碼稍做修改，只需要給<script>標籤的src屬性中的URL新增一個引數來指定回撥函式的名稱就可以了：

服務端：

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            // 前端指定的回撥函式名稱
            var callbackFuncName = context.Request.QueryString["callback"];
            var responseData = "Hello World";
            // 回撥指令碼，形如：handler('responseData');
            var scriptContent = string.Format("{0}('{1}');", callbackFuncName, responseData);
            context.Response.Write(scriptContent);
        }

Web客戶端：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jsonp demo</title>
    <script type="text/javascript">
        // 跨域傳送HTTP請求，從服務端獲取字串"Hello World" 
        function getHello() {
            var script = document.createElement('script');
            script.setAttribute('src', 'http://localhost:8546/Service.ashx?callback=handler');//callback指定回撥函式名稱
            document.querySelector("head").appendChild(script);
        }
        // 處理函式
        function handler(data) {
            alert(data);
            // our code here...
        }
    </script>

</head>
<body>
    <input type="button" value="傳送跨域HTTP請求，獲取Hello World" onclick="getHello()" />
</body>
</html>

使用jQuery的JSONP跨域

在上面的章節我們探及了JSONP跨域的原理。幸運的是，我們並不需要每次都寫這麼多程式碼來完成一次跨域請求。

jQuery的ajax方法對JSONP式跨域請求進行了封裝，如果使用jQuery進行JSONP式跨域請求，程式碼將會變得非常簡單：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jQuery jsonp demo</title>
    <script src="jquery-1.11.0.min.js"></script>
	<script type="text/javascript">
        $.ajax({
            type: "get",
            url: "http://localhost:8546/Service.ashx",
            dataType: "jsonp",//一定要指明為jsonp
            success: function (data) {
                alert(data);
            },
            error: function () {
                alert('fail');
            }
        });
    </script>
</head>
<body>
    使用jQuery一切將會變得非常簡單。
</body>
</html>

只需要將dataType設定為"jsonp"就可以進行跨域請求了，一切就像傳送非跨域請求那樣簡單。

jQuery為我們封裝好了回撥函式，一般情況下不需要我們單獨去寫，如果你不想在success中處理，想單獨寫處理函式，那麼可以通過設定這2個引數來實現：

jsonp: "callback",//傳遞給服務端的回撥函式引數名，如果不設定此項，則預設是"callback"
jsonpCallback: "handler",//傳遞給服務端的回撥函式名稱，如果不設定此項，則預設是形如"jQuery111007837897759742043_1460657212499"的由jQuery自動生成的函式名稱，會自動在$.ajax方法的success中完成呼叫。

必須要強調的是：

1.JSONP雖然看起來很像一般的ajax請求，但其原理不同，JSONP是對文章第一小節原理的封裝，是通過<script>標籤的動態載入來實現的跨域請求，而一般的ajax請求是通過XMLHttpRequest物件進行；

2.JSONP不是一種標準協議，其安全性和穩定性都不如 W3C 推薦的 CORS；

3.JSONP不支援POST請求，即使把請求型別設定為post，其本質上仍然是一個get請求。

JavaScript中的跨域解決方案彙總：

跨域解決方案二：使用JSONP實現跨域

JSONP跨域原理探祕

使用jQuery的JSONP跨域

跨域解決方案二：使用JSONP實現跨域

跨域解決方案一：JSONP

跨域解決方案一：使用CORS實現跨域

跨域請求之二：jsonp詳解

ASP.NET中JSONP的兩種實現以及其他跨域解決方案的簡單實現 ASP.NET中JSONP的兩種實現以及其他跨域解決方案的簡單實現

【PHP】Ajax跨域解決方案、jsonp、cors

CORS ———— 跨域解決方案之二

跨域解決方案JSONP

Ajax通過jsonp實現跨域訪問,訪問成功但走error不走success的的問題解決

跨域解決方案等一些問題（jsonp,nginx代理等）

利用jsonp實現跨域請求

JSON跨域解決方案收集

前端如何去做跨域解決方案

實戰案例：構建docker容器集群（解決方案一：使用自定義網橋連接跨主機容器）

前端常見跨域解決方案（全）

前端常見跨域解決方案

方案優化：網站實現掃描二維碼關註微信公眾號，自動登陸網站並獲取其信息

jsonp實現跨域

spring mvc的跨域解決方案

Jsonp實現跨域訪問

跨域解決方案二：使用JSONP實現跨域

JSONP跨域原理探祕

使用jQuery的JSONP跨域

相關推薦