Что такое CORS (Cross-Origin Resource Sharing)

Если вы когда-нибудь работали с API из браузера, то наверняка встречали такую ошибку:

Access to fetch at ‘https://api.example.com/data from origin ‘http://localhost:3000 has been blocked by CORS policy

Это происходит из-за механизма CORS — Cross-Origin Resource Sharing.

Зачем нужен CORS

Браузеры используют правило same-origin policy (политика одного источника) ради безопасности.
Оно запрещает скриптам с одного домена получать данные с другого.
Иначе любая страница могла бы «подсмотреть» ваши данные, например из интернет-банка.

CORS позволяет серверу явно сказать:

«Да, я доверяю запросам с этого источника.»

Пример работы CORS

У вас фронтенд работает на http://localhost:3000, а API — на https://api.example.com.

Без настройки CORS браузер заблокирует запрос.
Чтобы разрешить доступ, сервер должен добавить заголовок:

Access-Control-Allow-Origin: http://localhost:3000

Или разрешить всем (менее безопасно):

Access-Control-Allow-Origin: *

Основные заголовки CORS

  • Access-Control-Allow-Origin — список разрешённых источников
  • Access-Control-Allow-Methods — методы (GET, POST, PUT…)
  • Access-Control-Allow-Headers — какие заголовки можно передавать
  • Access-Control-Allow-Credentials — можно ли передавать cookie

Итог

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