Руководство по JSONP

По умолчанию вы не можете загрузить файл JSON с домена и порта, которые не являются текущими, и использовать его в своем приложении.

Вы можете обслуживать приложение с localhost:8080 , но API обслуживается другим Node.js приложение, запущенное на локальном хостинге: 2001 .

Или вы можете захотеть получить доступ к какому-нибудь общедоступному API, предоставляемому в формате JSON, в браузере.

Это обычная потребность в использовании API-интерфейсов, но в браузере мы ограничены по соображениям безопасности из-за политики того же происхождения такое поведение должно быть запрещено по умолчанию, чтобы предотвратить возможные проблемы.

JSONP родился до АВТОМОБИЛИ существовали. Сегодня CORS является более (единственным?) разумный подход к проблеме, но полезно также знать JSONP, который может быть лучше в вашем случае. Кроме того, с момента его создания в JSONP были обнаружены некоторые проблемы с безопасностью, поэтому вам необходимо знать обо всех последствиях использования JSONP для безопасности .

JSONP поддерживает только метод GET HTTP, поэтому он гораздо менее эффективен, чем CARS.

Как это работает

Сервер должен поддерживать JSONP, например, Express позволяет использовать метод Response.jsonp() , который похож на Response.json() но обрабатывает обратные вызовы JSONP:

res.jsonp({ username: 'Flavio' })

На стороне клиента вы загружаете конечную точку, указывая функцию обратного вызова:

Функция обратного вызова должна быть глобальной, которая будет получать данные JSON:

const theCallbackFunction = (data) => {
  console.log(data)
}

У jQuery был удобный способ упростить этот подход, абстрагировав JSONP в своем методе ajax() :

$.ajax({
  url: 'http://localhost:2001/api.json',
  dataType: 'jsonp',
  success: (data) => {
    console.log(data)
  }
})

Оригинал: “https://flaviocopes.com/jsonp/”