Ряд ошибок которые могут возникать в 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 запрос и у вас должно получиться.