При первом подключении к новому эндпоинту возникают ошибки CORS, хотя на бэкенде всё настроено корректно. Что делать в этой ситуации?

Что такое CORS и почему возникают ошибки

CORS (Cross-Origin Resource Sharing) — это механизм браузера, который ограничивает запросы к ресурсам с другого домена. Когда фронтенд на localhost:3000 обращается к API на api.example.com, браузер отправляет запрос и проверяет ответ сервера на наличие специальных заголовков. Если сервер не разрешает этот источник, браузер блокирует ответ, и вы видите ошибку в консоли.

Частая ситуация: бэкенд настроен корректно для других эндпоинтов, но новый эндпоинт всё равно вызывает ошибку. Это может быть связано с тем, что новый эндпоинт использует другой метод (например, PUT вместо GET) или включает кастомные заголовки, что вызывает preflight-запрос.

Диагностика проблемы

Первым делом откройте вкладку Network в DevTools и найдите запрос, который завершился ошибкой. Посмотрите на заголовки запроса и ответа. Если запрос имеет метод OPTIONS, значит, браузер выполняет preflight. Убедитесь, что сервер отвечает на OPTIONS с заголовками:

Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization

Если сервер не отвечает на OPTIONS или возвращает ошибку, CORS не пройдёт. Также проверьте, что заголовок Access-Control-Allow-Origin не содержит звёздочку, если вы используете куки или авторизацию — тогда нужно указать конкретный домен.

Практические шаги

• Проверьте, что сервер обрабатывает OPTIONS-запросы до основной логики эндпоинта.
• Убедитесь, что в заголовках запроса нет лишних кастомных заголовков, которые не разрешены сервером.
• Если используете прокси на фронтенде (например, в webpack dev server), настройте его для перенаправления запросов, чтобы избежать CORS в разработке.

Пример настройки CORS в Express:

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

В итоге, если бэкенд настроен правильно, но ошибка остаётся, проверьте, не блокирует ли запрос сам браузер из-за несоответствия заголовков или метода. Иногда помогает очистка кэша или использование режима инкогнито.

Вывод: CORS — это защитный механизм браузера, и ошибки чаще всего возникают из-за неправильной обработки preflight-запросов или неверных заголовков. Всегда проверяйте сетевые запросы в DevTools и убедитесь, что сервер отвечает корректно на OPTIONS, если ваш запрос не является простым.