Кросс-доменные AJAX-запросы (CORS/JSONP)
Изучите и применяйте методы выполнения кросс-доменных AJAX-запросов с помощью JSONP или настройки заголовков CORS на сервере для безопасного обмена данными.
«Кросс-доменные AJAX-запросы (CORS/JSONP)» — бесплатный урок jQuery Academy на CoddyKit. Это урок 3 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения jQuery Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс jQuery Academy содержит 3 уроков всего.
Междоменный AJAX: проблема
Когда Ваш сайт пытается получить данные с другого сайта, это называется междоменным AJAX-запросом. Такая задача часто бывает непростой!
По умолчанию веб-браузеры применяют правило безопасности, запрещающее веб-странице отправлять запросы к домену, отличающемуся от исходного. Это правило защищает Ваши данные.
Понимание политики единого источника
Упомянутое правило безопасности называется политикой единого источника (SOP). Это базовая функция безопасности браузеров.
SOP определяет, что веб-браузер разрешает скриптам, содержащимся на первой веб-странице, обращаться к данным второй веб-страницы только в том случае, если у обеих страниц один и тот же источник (домен, протокол и порт).
- Пример: страница с домена
mywebsite.comне может напрямую получить данные сapi.anotherdomain.com.
CORS: современное решение
Чтобы безопасно разрешить междоменную передачу данных, веб-сообщество разработало совместное использование ресурсов между источниками (CORS). Это современный стандартный способ решения такой задачи.
CORS работает благодаря тому, что сервер явно сообщает браузеру: определённым другим доменам разрешено обращаться к его ресурсам.
CORS: настройка на сервере
CORS в основном настраивается на сервере, предоставляющем данные. Сервер отправляет в ответе специальные HTTP-заголовки, указывающие разрешённые источники.
Ключевым является заголовок Access-Control-Allow-Origin. Он указывает, какие домены могут обращаться к ресурсу.
Access-Control-Allow-Origin: *(разрешает доступ с любого домена)Access-Control-Allow-Origin: https://yourdomain.com(разрешает доступ только с указанного домена)
CORS: клиентские запросы jQuery
На стороне клиента (при использовании jQuery) отправка CORS-запроса обычно ничем не отличается от обычного AJAX-запроса, если сервер настроен правильно.
jQuery обрабатывает взаимодействие на уровне браузера. Вам нужно лишь указать в вызове $.ajax() междоменный URL.
$.ajax({
url: "https://api.example.com/data", // Server must allow CORS
method: "GET",
success: function(data) {
console.log("CORS success:", data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.error("CORS Error:", textStatus, errorThrown);
}
});CORS: предварительные запросы (OPTIONS)
Для некоторых «сложных» CORS-запросов браузеры перед отправкой настоящего запроса выполняют предварительный запрос. Это дополнительный этап безопасности.
В предварительном запросе используется HTTP-метод OPTIONS, чтобы запросить у сервера разрешение. Если сервер его предоставляет, браузер отправляет настоящий запрос (например, PUT, DELETE или запрос с пользовательскими заголовками).
JSONP: более старый вариант
До широкого распространения CORS стандартным обходным решением для междоменных запросов был JSONP (JSON с дополнением), особенно в старых браузерах и при работе с API.
JSONP обходит политику единого источника, используя разрешение браузера загружать теги <script> с любого домена.
JSONP: принцип работы
JSONP работает следующим образом:
- Вы динамически создаёте тег
<script>и задаёте его атрибутуsrcмеждоменный URL. - Сервер, ожидающий JSONP-запрос, оборачивает данные JSON в вызов функции (это и есть «дополнение»).
- Браузер выполняет этот скрипт, вызывая глобально определённую на Вашей странице функцию и передавая ей данные в качестве аргумента.
JSONP: реализация в jQuery
jQuery значительно упрощает реализацию JSONP. Вам нужно лишь указать dataType: "jsonp" в вызове $.ajax().
jQuery автоматически создаёт динамический тег <script>, генерирует уникальное имя функции обратного вызова и вызывает её после получения ответа.
$.ajax({
url: "https://api.example.com/jsonp-data?callback=?", // Server must support JSONP
dataType: "jsonp",
success: function(data) {
console.log("JSONP success:", data);
},
error: function(jqXHR, textStatus, errorThrown) {
console.error("JSONP Error:", textStatus, errorThrown);
}
});CORS и JSONP: основные различия
Хотя оба подхода решают междоменные проблемы, CORS и JSONP имеют разные особенности:
- CORS: современный стандарт, использует HTTP-заголовки, безопасен, поддерживает все HTTP-методы, требует настройки на сервере.
- JSONP: более старое обходное решение, использует теги
<script>, менее безопасен, поддерживает только GET-запросы, работает на стороне клиента и требует, чтобы сервер оборачивал ответ.
Быстрая проверка: междоменные запросы
Какие из следующих утверждений являются TRUE в отношении междоменных AJAX-запросов?
Итоги: междоменные запросы
Вы узнали, как обходить политику единого источника при выполнении междоменных AJAX-запросов!
- CORS — современный безопасный стандарт, использующий серверные HTTP-заголовки для предоставления разрешения.
- JSONP — более старое и менее безопасное решение для GET-запросов, использующее динамические теги
<script>.
По возможности всегда выбирайте CORS, поскольку он безопаснее и гибче. JSONP в основном используется в устаревших системах или особых случаях.
Часто задаваемые вопросы
Урок «Кросс-доменные AJAX-запросы (CORS/JSONP)» бесплатный?
Да — полный текст урока «Кросс-доменные AJAX-запросы (CORS/JSONP)» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс jQuery Academy, подпишись на CoddyKit PRO. Курс jQuery Academy содержит 3 уроков всего.
Чему я научусь в уроке «Кросс-доменные AJAX-запросы (CORS/JSONP)»?
Изучите и применяйте методы выполнения кросс-доменных AJAX-запросов с помощью JSONP или настройки заголовков CORS на сервере для безопасного обмена данными. Ты практикуешь jQuery Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать jQuery Academy?
Предыдущий опыт не требуется. jQuery Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 3.
Сколько времени занимает урок «Кросс-доменные AJAX-запросы (CORS/JSONP)»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке jQuery Academy?
Да. Каждый урок jQuery Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Эффективная настройка AJAX-запросов
- Обработка ошибок и успешных результатов AJAX
- Кросс-доменные AJAX-запросы (CORS/JSONP)