🌍 Привет мир! 👋🏻

🌍 Привет мир! 👋🏻

Сегодня разберем как всегда важную и слегка загадочную тему — CORS (Cross-Origin Resource Sharing) ✨! Скорее всего вы сталкивались с этим понятием, а возможно у вас все еще впереди!
P.S. Когда появляется проблема из-за CORS, бэкендер тихо улыбается, а фронт плачет 👨‍💻.

💭 Ситуация

Представим, что вы пилите фронт, который должен общаться с бэком, находящимся на другом домене. Казалось бы, все просто: делаешь запрос и радуешься ответу. Но браузер может сделать твой день менее успешным одной лишь фразой:
Почти цитата: "🚫 Нет, дружок, не получишь данные с бэка, политика безопасности такая!". И вот тут на сцену выходит CORS!

❓ Так шо такое CORS все-таки

CORS работает как диалог между браузером и сервером, основанный на HTTP-заголовках. Механизм защиты ограничивает запросы между разными источниками (origin). Origin — это комбинация из:

🟢протокол (http или https),
🟢домен,
🟢порт.

Если хоть что-то отличается — браузер считает это другим источником и включает защиту. Цель — предотвратить вредоносные действия от чужих сайтов.

⚙️ Как работает CORS

Когда ваш фронт (развернутый, на сайте (успехусешный.com) запрашивает данные с другого домена (путькуспеху.com), браузер автоматически добавляет к запросу заголовок Origin: https://успехусешный.com. Этот заголовок сообщает серверу, откуда пришёл запрос.

Сервер в ответ решает, разрешать ли доступ. Если он включает в ответ заголовок Access-Control-Allow-Origin и указывает там адрес запроса (например, https://успехусешный.com) или символ * , то браузер пропускает ответ.
Если такого заголовка нет или значение не совпадает, браузер блокирует ответ — даже если сервер технически его отправил.

А еще есть «сложные» запросы, например, с методом POST или нестандартными заголовками, браузер сначала отправляет предварительный (OPTIONS) запрос, чтобы уточнить у сервера, можно ли дергать сложный запрос или нет. В ответе сервер указывает, какие методы (Access-Control-Allow-Methods) и заголовки (Access-Control-Allow-Headers) разрешены.

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

- Access-Control-Allow-Origin — какой источник может обращаться к ресурсу.
- Access-Control-Allow-Methods — разрешенные HTTP-методы.
- Access-Control-Allow-Headers — какие заголовки разрешены.
- Access-Control-Allow-Credentials — можно ли передавать куки и авторизационные данные.

📌 Пример настроек бэка:

res.setHeader('Access-Control-Allow-Origin', 'https://успехусешный.com');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');

☀️ Подсветка важных моментов:

✏️ Предварительный запрос (preflight) отправляется не всегда, а только если запрос использует нестандартные методы, заголовки или если запрос отправляет куки или данные авторизации.
✏️ Если вы запускаете HTML-файл с JS напрямую (через file://), браузер обычно не применяет строгие правила CORS, поскольку отсутствует явный origin. Но если ты используешь сервер (например, через Vite или другой локальный сервер), origin становится явным, и CORS-проверки включаются.
✏️ Можно разрешить запросы всем ('*'), но это потенциальная дыра в безопасности.
✏️ Лучше указывать конкретные разрешённые источники.
✏️ CORS проверяется и работает исключительно на стороне браузера, серверу без разницы, откуда пришел запрос, если это не браузер.
✏️ Если хотите протестировать API, не упираясь в CORS, используйте прокси или инструменты типа Postman, curl, которые не имеют этих ограничений.

💬 Делитесь своим мнением в комментариях👇! Если вам понравилась статья, не забудьте поставить лайк и хорошего вам дня! 👍

#JAVASCRIPT #SECURITY