Автор оригинала: FreeCodeCamp Community Member.
Энтони Нг
В этой статье мы смотрим на то, что JSONP, его недостатки и некоторые альтернативы JSONP.
Возможно, вы столкнулись с ситуациями, когда вы делаете API вызов от одного происхождения на другой. Например, у нас есть страница, обслуживаемая от localhost: 3000, которая называет API от localhost: 8000.
Примечание : Мы будем ссылаться на localhost: 3000 как наш клиентский сервер. Мы будем ссылаться на localhost: 8000 в качестве нашего сервера API.
Но мы видим эту запугивающую ошибку.
Это политика одинакового происхождения, защищая нас. Эта политика ограничивает о том, как ресурсы из одного происхождения взаимодействуют с ресурсами из другого происхождения. Это критический механизм безопасности в браузере. Но есть случаи, когда мы хотим сделать перекрестные просьбы о доверенных ресурсах.
JSONP (JSON с прокладкой) обеспечивает работу для этой проблемы политики одинакового происхождения. Давайте посмотрим на то, как пришел JSONP.
Техническое погружение
Мы можем запустить код JavaScript внутри вашего HTML-файла с помощью <Сценарий> Теги.
Мы можем переместить наш код JavaScript в отдельный файл JavaScript и ссылаюсь на него с нашим тегом сценария. Наша веб-страница теперь делает внешний сетевой вызов для файла JavaScript. Но функционально все работает то же самое.
Файл JavaScript не должен иметь JS расширение. Браузер будет интерпретировать контент как JavaScript, если тип содержимого ответа является JavaScript. ( Text/JavaScript , Приложение/JavaScript ). Большинство серверов позволяют вам установить тип содержимого. В Экспресс Вы бы сделали:
Ваш AV E A A A JS расширение.
Теги скрипта не ограничены политикой одинакового происхождения. Есть другие теги, такие как ; и & LT; Видео> Теги, которые не ограничены политикой одинакового происхождения. Таким образом, наш JavaScript может жить в другом происхождении.
Код внутри файла JavaScript имеет доступ ко всему, что находится в объеме. Вы можете использовать функции, определенные ранее в вашем файле HTML.
Вы можете пройти аргументы, поскольку вы будете для нормального вызова функции.
В приведенном выше примере мы прошли жесткую строку. Но мы также могли бы передать данные, поступающие из базы данных. Наш сервер API может построить файл JavaScript с этой динамической информацией.
Это то, что jsonp. Вместо использования принести или XMLHTTPREQUEST Чтобы сделать вызов API для получения данных, мы использовали Sed A & L T; Сценарий> Тег, мы смогли обойти политику одинакового происхождения.
Как я уже упоминал выше, JSONP означает JSON с прокладкой. Что означает прокладки? Обычные ответы API Верните JSON. В ответах JSONP мы возвращаем json-ответ в окружающую (или мягкую) с функцией JavaScript.
Большинство серверов позволяют указать имя вашей функции заполнения.
Сервер принимает имя функции заполнения в качестве запроса. Это вызывает вашу функцию прокладки с помощью данных JSON в качестве аргумента.
Вы не ограничиваетесь пропуском имен функций в качестве обратного вызова. Вы можете пройти встроенный JavaScript в вашем запросе.
Я не думал о причине, чтобы сделать это.
Альтернативы использования JSONP
Нет официального спецификации для JSONP. Я думаю о JSONP как более взлома.
Распределение ресурсов с перекрестным происхождением Имеет официальную спецификацию, и является предпочтительным способом одобрения политики в однородстве.
Вы можете включить совместное использование ресурсов перекрестного происхождения, добавив заголовок на наш ответ.
Это означает, что все происхождение может использовать этот ресурс без боязней политики одинакового происхождения.
Иногда у вас нет контроля над сервером-кодом, хотя. Вы не сможете включить Доступ-контроль-разрешение заголовок Альтернативное решение – сделать ваш собственный прокси-сервер сделать запрос с перекрестным происхождением для вас. Политика в одной и той же источнике относится только к браузеру. Серверы могут свободно делать запросы по перекрестным происхождениям.
Вопросов? Комментарии? Пожалуйста, оставьте сообщение ниже.