Сталкивался ли с CORS ошибками

CORS ошибки в фронтенде

Да, я неоднократно сталкивался с CORS (Cross-Origin Resource Sharing) ошибками, особенно при работе с внешними API. Это одна из самых частых проблем при разработке фронтенда.

Что такое CORS и почему он существует

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

• Протокол (http, https)
• Домен (example.com, api.example.com)
• Порт (3000, 8080, 443)

Если браузер загрузил страницу с https://app.example.com, а код пытается запросить данные с https://api.other.com, это разные origins — и браузер блокирует запрос в целях безопасности.

Реальные примеры из опыта

Пример 1: Запрос к API на другом домене

// frontend: https://app.example.com
const response = await fetch('https://api.other-service.com/data');
// Ошибка в консоли:
// Access to XMLHttpRequest at 'https://api.other-service.com/data' 
// from origin 'https://app.example.com' has been blocked by CORS policy:
// No 'Access-Control-Allow-Origin' header is present on the requested resource.

Это случилось, когда я интегрировал платежный сервис. API требовал запросов с фронтенда, но без правильных CORS заголовков.

Пример 2: Запрос с credentials

const response = await fetch('https://api.example.com/data', {
  credentials: 'include' // Отправляем cookies
});
// Ошибка: ошибка CORS потому что сервер не разрешил credentials

Как я это решал

Решение 1: Настройка CORS на сервере (лучший вариант)

Попросил бэкенд-разработчика добавить правильные заголовки:

// На сервере (Node.js/Express)
app.use(cors({
  origin: 'https://app.example.com',
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

Решение 2: Прокси на своём сервере (когда нельзя менять сторонний API)

Создал прокси-endpoint на своём бэкенде:

// Frontend делает запрос к своему API
const response = await fetch('/api/proxy/external-data');

// На сервере (своём):
// POST /api/proxy/external-data -> запрос к https://api.other.com/data
// Браузер доверяет своему серверу, нет CORS проблем

Решение 3: Использование JSONP (устаревший способ)

Для старых API, которые поддерживают JSONP:

// Не рекомендуется, но иногда нужно
const script = document.createElement('script');
script.src = 'https://api.other.com/data?callback=handleData';
document.body.appendChild(script);

window.handleData = (data) => console.log(data);

Как отладить CORS ошибку

1. Смотри в консоль браузера — там будет точное сообщение об ошибке и какие заголовки ожидаются
2. Проверь Network tab — посмотри Headers запроса и ответа
3. Используй curl для проверки заголовков:

curl -i https://api.example.com/data
# Ищи заголовки типа Access-Control-Allow-Origin

1. Используй инструменты разработчика — Chrome DevTools показывает точно, какой заголовок не хватает

Лучшие практики

• Никогда не отключай CORS полностью — это опасно для безопасности
• Используй конкретные origins, а не '*' в production
• Для чувствительных операций используй токены в Authorization заголовке
• Тестируй CORS локально перед деплоем
• Документируй требования к CORS для API

Вывод

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