Ответ
CORS (Cross-Origin Resource Sharing) — это механизм безопасности браузеров, который использует HTTP-заголовки, чтобы разрешить или запретить веб-приложению, работающему на одном источнике (origin), запрашивать ресурсы с другого источника.
Почему это важно? Браузеры по умолчанию блокируют межсайтовые HTTP-запросы (например, с https://client.com к https://api.example.com) в соответствии с политикой Same-Origin Policy. CORS позволяет серверу явно указать, какие внешние источники могут получать к нему доступ.
Как это работает? Сервер должен включать специальные заголовки в свои ответы:
Access-Control-Allow-Origin: https://client.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type, AuthorizationПример ошибки в браузере:
Access to fetch at 'https://api.example.com/data' from origin 'https://client.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Ключевые моменты для тестирования:
- Preflight-запросы (OPTIONS): Для "непростых" запросов (например, с кастомными заголовками) браузер сначала отправляет запрос методом
OPTIONS, чтобы проверить разрешённые сервером методы и заголовки. - Учёт учётных данных: Запросы с куками или заголовками авторизации требуют дополнительного заголовка
Access-Control-Allow-Credentials: trueи конкретного указанияAccess-Control-Allow-Origin(нельзя использовать*). - Кэширование preflight: Заголовок
Access-Control-Max-Ageпозволяет браузеру кэшировать ответ на preflight-запрос.
Ответ 18+ 🔞
А, слушай, про CORS! Это ж та самая хуйня, из-за которой у половины разработчиков волосы на жопе встают дыбом. Представь себе: сидит твой фронтенд на client.com, такой весь из себя красивый, и вдруг решает: «А не сходить ли мне, сука, за данными на `api.example.com»? И тут его нахуй — бац! — браузер блокирует, как будто он воровать собрался.
А всё почему? Потому что браузер — он, блядь, как тот самый занудный охранник в пафосном клубе. У него есть своя политика — Same-Origin Policy. «Ты откуда пришёл? С client.com? А ресурс-то на api.example.com! Иди нахуй, не пущаю!» — вот его логика, в рот меня чих-пых.
Но выход есть, ёпта! Чтобы этого охранника уболтать, сервер должен выдать специальную «прописку», то есть заголовки в ответе. Типа:
Access-Control-Allow-Origin: https://client.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type, AuthorizationЭто как сказать: «Охранник, расслабься, я этого парня с client.com знаю, пусть заходит, ему можно GET, POST и PUT, и пусть со своими бумажками (заголовками) проходит».
А если сервер молчит как рыба об лёд, то в консоли браузера ты увидишь классику жанра, от которой хочется ебать мои старые костыли:
Access to fetch at 'https://api.example.com/data' from origin 'https://client.com' has been blocked by CORS policy...
Теперь про подводные ебучки, которые всех и добивают:
-
Preflight-запросы (OPTIONS). Это когда твой запрос не такой уж и простой. С кастомными заголовками там, или методом PUT. Браузер, такой хитрожопый, сначала шлёт «разведчика» — запрос методом
OPTIONS. Мол, «а можно к вам так-то и сяк-то?». И если сервер в ответе на этотOPTIONSне нарисовал нужные заголовки — всё, пиздец, основной запрос даже отправлен не будет. Мартышлюшка! -
Учёт учётных данных. О, это отдельная песня! Если твой запрос тащит с собой куки или заголовок
Authorization(ну, логично же, авторизоваться), то тут уже не отделаешься звёздочкой (*) вAllow-Origin. Нужно явно указать домен и добавитьAccess-Control-Allow-Credentials: true. Иначе браузер тебе доверия — ноль ебать. «Куки тащишь, а откуда пришёл — скрываешь? Подозрительный тип!» -
Кэширование preflight. Чтобы не слать этот ёбаный
OPTIONSперед каждым чихом, можно в ответе указатьAccess-Control-Max-Age. Типа, «браузер, запомни этот ответ на столько-то секунд и не доёбывайся». Но если настройки поменялись, а он закэшировал старое — ну, сам понимаешь, волнение ебать и дебаг на полдня.
Короче, CORS — это не ошибка, это фича. Но фича, которая сделана, чтобы все, блядь, немного пострадали и задумались о безопасности. А то разбегутся эти фронтендеры, запросы куда попало слать!