CORS

Что такое CORS?

Грубо говоря, CORS служит для защиты вашего бэкенда от запросов к нему со стороны путем установки специальных HTTP заголовков.

Более точно, CORS (Cross-Origin Resource Sharing, англ.  «совместное использование ресурсов разных источников») — это стандарт, позволяющий предоставлять веб-страницам доступ к объектам сторонних интернет-ресурсов. Сторонним считается любой интернет-ресурс, который отличается от запрашиваемого протоколом, доменом или портом.

Доступ предоставляется по специализированным запросам. Интернет-ресурс, принимающий запрос, содержит список доверенных источников, которым разрешен доступ к объектам. Страница-источник запроса получает доступ, если входит в список доверенных источников. Для предоставления доступа всем сторонним интернет-страницам используется маска «*».

Соответственно, делать всё это может только бэкенд, и настраивается это на нем. Конкретное решение зависит от языка бэкенда, используемого фреймворка и даже вебсервера.

Принцип работы CORS

При создании перекрестного HTTP-запроса браузер клиента добавляет в него объявление домена веб-страницы, инициирующей запрос. Домен объявляется в разделе Origin.

Например, страница https://client-1.com/page.html запрашивает данные со страницы https://server-site.com/info. Пример запроса от браузера клиента, использующего методы CORS, приведен ниже:

GET /info HTTP/1.1
Host: server-site.com
Origin: client-1.com

В случае, если сервер по адресу www.server-site.com разрешает странице-источнику запроса доступ к данным с домена, в его ответе на запрос появится строка Access-Control-Allow-Origin с именем объявленного домена:

Access-Control-Allow-Origin: https://client-1.com

Если сервер, на который запрошен доступ, не добавит в ответ указанную строку, браузер клиента вместо данных файла info вернет код ошибки.

Если на сервере разрешен доступ к ресурсу страницам любого стороннего домена, в ответе будет указана маска «*».

Access-Control-Allow-Origin: *

Если на сервере разрешен доступ не всем, а нескольким сторонним клиентам, ответ сервера содержит имена всех этих доменов, выведенных отдельными строками или разделенных пробелами:

Access-Control-Allow-Origin: https://client-1.com https://client-2.com https://client-3.com

В стандарте CORS много нюансов. Вот более подробная статья по теме CORS

Проблемы с CORS

CORS проблемы могут возникнуть только когда к ресурсу обращается браузер, а не отдельная программа типа Postman или другой бэкенд.

Как временное решение при разработке могут помочь CORS proxy, которые становятся посредником между фронтендом и бэкендом, или расширения браузера.

Vite предоставляет подобный прокси для dev режима.