Каждый frontend-разработчик рано или поздно сталкивается с так называемой ошибкой CORS. “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” — знакомый текст, не правда ли? Попробуем разобраться, что он значит.
Эта ошибка возникает, когда вы пытаетесь загрузить ресурсы между разными источниками (cross-origin) — то есть расположенными на разных доменах/поддоменах, протоколах или портах. Разумеется, связана она с протоколами безопасности.
Представьте себе интернет, в котором нет ограничений на кросс-доменные запросы. Вы случайно попадаете на вирусный сайт — а там размещён скрипт, посылающий куда-то запросы от вашего имени. И вот злоумышленники уже заходят в ваш банковский личный кабинет и переводят деньги на свой счёт.
Проблема возникла, когда интернет перестал быть сугубо текстовым: появились теги, подгружающиеся уже после загрузки страницы и способные самостоятельно делать запросы. Поэтому в 1995 была введена политика одинакового источника (same-origin policy), запрещающая большую часть cross-origin взаимодействий.
С развитием интернета жёсткую политику same-origin смягчил механизм CORS (cross-origin resource sharing). Это технология совместного использования ресурсов между разными источниками, которая позволяет предоставить клиенту доступ к ресурсам домена, отличного от текущего.
Идея в том, что сервер может дать добро на CORS, отправив клиенту специальные HTTP-заголовки. В том числе ‘Access-Control-Allow-Origin’ из текста нашей ошибки, содержащий имя хоста, которому разрешено делать запросы.