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

時間 2019-11-06

標籤深刻問題利用 jsonp 解決欄目 JSON 简体版

原文原文鏈接

閱讀目錄

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

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

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

深刻跨域問題(4) - 利用代理服務器解決跨域數據庫

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

`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>
複製代碼

直接打開此連接：app

你能夠看到，上述返回信息是一串字符串，字符串裏寫入了調用 jsonCallback() 函數，並傳遞一個JSON 字符串。函數

打開控制檯，你就能夠看到：

上述實現原理：

利用 script 標籤，規避跨域，<script src="url">。
在客戶端聲明一個函數，function jsonCallback() {}。
在服務端根據客戶端傳來的信息，查找數據庫，而後返回一份字符串。
客戶端，利用<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');
});
複製代碼