深入跨域問題(3) - 利用 JSONP 解決跨域

leiting1998發表於2018-05-17
跨域JSON

閱讀目錄

深入跨域問題(1) - 初識 CORS 跨域資源共享；

深入跨域問題(2) - 利用 CORS 解決跨域

深入跨域問題(3) - 利用 JSONP 解決跨域（本篇）

深入跨域問題(4) - 利用 代理伺服器 解決跨域

什麼是跨域，在這篇文章內部就不再講述了，本文主要著重於實現 JSONP 。

script 標籤：

根據同源策略的限制，在 埠，域名，協議 這三者 一個或者多個不同的情況下 ，就會出現跨域限制。

但是，<script> 標籤訪問時，可以跨越這些同源策略限制，但只能使用 GET 方法：

簡單例子：

JSONP 的運用十分廣泛，各大網站都有使用：豆瓣，QQ音樂等；下面是 QQ音樂的 簡單 JSONP 介面：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ajax測試</title>
</head>
     
<body>
    <script>
        function jsonCallback(data) {
            console.log(data);
        }
    </script>
    <script src="https://c.y.qq.com/qzone/fcg-bin/fcg_ucc_getcdinfo_byids_cp.fcg"></script>
</body>

</html>
複製程式碼

直接開啟此連結：

深入跨域問題(3) - 利用 JSONP 解決跨域

你可以看到，上述返回資訊是一串字串，字串裡寫入了呼叫 jsonCallback() 函式，並傳遞 一個JSON 字串。

開啟控制檯，你就可以看到：

深入跨域問題(3) - 利用 JSONP 解決跨域

上述實現原理：

  1. 利用 script 標籤，規避跨域，<script src="url">。
  2. 在客戶端宣告一個函式，function jsonCallback() {}。
  3. 在服務端根據客戶端傳來的資訊，查詢資料庫，然後返回一份字串。
  4. 客戶端，利用<script>標籤解析為可執行的JavaScript程式碼，呼叫 jsonCallback() 函式。

事實上，原理很簡單。

基本實現

在這個部分裡，我們將基本實現這個流程。

客戶端程式碼：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ajax測試</title>
</head>
     
<body>
    
    <script>
        function jsonpCallback(data) {
            console.log(data);
        }
    </script>
    
    <!-- 負責解析字串為 JavaScript 程式碼 -->
    <script src="http://localhost:3000"></script>
</body>

</html>
複製程式碼

伺服器端程式碼：

const http = require('http');

var data  = { name: 'BruceLee', password: '123456' };

const server = http.createServer((request, response) => {

    if (request.url === '/') {
        response.writeHead(200, { 
            'Content-Type': 'application/json;charset=utf-8' 
        });
        
        // 返回一段 JavaScript 程式碼
        response.end( "jsonpCallback(" + JSON.stringify(data) + ")" );
    }

});

server.listen(3000, () => {
    console.log('The server is running at http://localhost:3000');
});
複製程式碼

在這裡，我們最後直接返回一個 字串 給客戶端，<script> 標籤將直接解析 字串 裡面的內容為 JavaScript 程式碼，即呼叫 jsonpCallback() 函式！！！

深入跨域問題(3) - 利用 JSONP 解決跨域

這就是，基本的前後端，使用 JSONP 解決跨域問題的方案 。

JSONP 與 CORS 的對比

JSONP 是很早很成熟的解決方案，但是，只能進行 GET 請求，無法實現上傳資料等操作。

反觀：CORS 雖然分 預請求 和 非預請求 ，但是，無疑支援的功能是非常強大的 ！！！

參考與感謝

  • https://www.cnblogs.com/giggle/p/5496596.html
  • https://blog.csdn.net/u011897301/article/details/52679486

感謝上述兩篇連結的作者，他們讓我明白了 JSONP 的實質 。

相關文章