Глубокая междоменная проблема (3) — Использование JSONP для решения междоменной проблемы

Node.js внешний интерфейс

читать оглавление

Углубленная междоменная проблема (1) — первое понимание междоменного совместного использования ресурсов CORS;

Углубленные междоменные проблемы (2) — Использование CORS для решения междоменных проблем

Углубленные междоменные проблемы (3) — Использование JSONP для решения междоменных проблем (эта статья)

Глубокая междоменная проблема (4) — используйте прокси-сервер для решения междоменной проблемы.

Что такое cross-domain, в этой статье я рассказывать не буду, эта статья в основном посвящена реализации JSONP.

scriptЭтикетка:

В соответствии с ограничениями политики одного и того же происхождения, впорт, доменное имя, протоколэти троеодна или несколько различных ситуаций, будут междоменные ограничения.

но,<script>При доступе к тегам можно обойти эти ограничения политики одного и того же происхождения, но только с помощьюGETметод:

Простой пример:

JSONP широко используется и используется крупными веб-сайтами: Douban, QQ Music и т. д. Ниже приведен простой интерфейс JSONP QQ Music:

<!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>

Откройте эту ссылку напрямую:

Вы можете видеть, что приведенная выше возвращаемая информация представляет собой строку строк, и вызов записывается в строку.jsonCallback()функцию и передайте ей строку JSON.

Откройте консоль, вы увидите:

Вышеприведенный принцип реализации:

  1. использоватьscriptтеги, избегайте междоменного,<script src="url">.
  2. Объявите функцию на стороне клиента,function jsonCallback() {}.
  3. На основе информации от клиента сервер выполняет поиск в базе данных и возвращает строку.
  4. клиент, используя<script>теги разрешаются в runnableJavaScriptкод, звоните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()функция! ! !

Это базовое внешнее и внутреннее решение, использующее JSONP для решения междоменных проблем.

JSONPа такжеCORSконтраст

JSONPявляется очень ранним и зрелым решением, однако толькоGETзапрос, и такие операции, как загрузка данных, не могут быть реализованы.

И наоборот: CORS делится напредварительный запроса такжебез предварительного запроса, однако, без сомнения, поддерживаемые функции очень мощные! ! !

Ссылка и спасибо

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

Благодаря авторам двух приведенных выше ссылок они помогли мне понять суть JSONP.

Категории