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

JSONP - это способ загрузки данных со сторонних серверов в обход политики одинакового происхождения.

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

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

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

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

JSONP родился раньшеCORSсуществовал. Сегодня CORS - это более (единственный?) Разумный подход к проблеме, но полезно также знать JSONP, который может быть лучше в вашем случае. Кроме того, с момента создания JSONP были обнаружены некоторые проблемы с безопасностью, поэтому вам нужно знать обо всехпоследствия использования JSONP для безопасности.

JSONP поддерживает только GETHTTPметод, поэтому он намного менее эффективен, чем CORS.

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

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

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

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

<script src="http://localhost:2001/api.json?callback=theCallbackFunction"></script>

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

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

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

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

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по js: