Ряд ошибок которые могут возникать в JavaScript огромен, а чтобы понять что каждая из них означает — это еще сложнее. В этом посте я расскажу почему происходит ошибка «No ‘Access-Control-Allow-Origin’ header is present on the requested resource» во время XMLHttpRequest (Ajax) запроса между двумя разными доменами и как её исправить.
Если вы когда-либо сталкивались со следующей ошибкой:
XMLHttpRequest cannot load http://domain.ru. No’Access-Control-Allow-Origin’ header is present on the requested resource.
То вероятнее всего вы пытались сделать XMLHttpRequest запрос с одного домена на другой. В jQuery этот запрос обозначается как Ajax и делается он с помощью $.ajax() метода, но сути в этом не меняется, потому что все равно используется XMLHttpRequest.
В целях безопасности, браузеры не разрешают делать запросы между разными доменами и вы НИКАК не сможете это исправить.
Вы можете воспользоваться так называемым CORS (Cross-Origin Resource Sharing), но это не всегда работает и не самое лучшее решение. Я указал английский источник, потому что не нашел более-менее подходящего описания на русском.
Ниже я расписал два варианта решения этой проблемы.
Решение если нет доступа ко второму домену
Если у вас нет доступа к домену на который вы делаете Ajax запрос, то у вас не получится его сделать. Пробуйте это делать с PHP, Python и других подобных языков.
Например, в PHP для этого подойдет file_get_contents(), если вам нужно сделать обычный GET запрос без параметров (получить например, HTML или JSON страницы).
Или же использовать cURL, который позволяет отправлять запросы с параметрами. Вот простой пример для сохранения страницы example.com.
Примеров в интернете хватает, поэтому дерзайте.
Решение, если есть доступ ко второму домену
Если же у вас есть доступ ко второму сайту, то на странице куда делается запрос вы можете добавить следующие заголовки:
Content-type: text/html Access-Control-Allow-Origin: *
В PHP это будет выглядеть следующий образом:
header('Content-type: text/html');
header('Access-Control-Allow-Origin: *');
Первый заголовок не обязателен, но вы можете его оставить. Он указывает, что ответ будет возвращен в HTML. Вы можете его заменить на свой, если вы используете например, JSON как ответ.
Второй заголовок обязателен — это как раз то, что разрешает делать запросы между разными доменами.
После этого этапа попробуйте повторить Ajax запрос и у вас должно получиться.
Вопросы
Если у вас остались какие-либо вопросы, пишите их ниже к этому посту. Буду рад ответить.
