Что такое CORS?

// ❌ Ошибка CORS:
// Сайт example.com пытается запросить данные с api.other.com
fetch('https://api.other.com/data')
  .then(response => response.json())
  .catch(error => console.log('CORS ошибка!')); // Блокировано браузером
 
// ✅ Решение — сервер должен разрешить запрос

// ✅ Один источник (same-origin):
// https://example.com/page1
// https://example.com/page2
 
// ❌ Разные источники (cross-origin):
// https://example.com ❌ https://api.com
// http://example.com ❌ https://example.com  
// https://example.com ❌ https://example.com:8080

// ❌ Блокируется, если сервер не разрешает:
fetch('https://api.other.com/users')
  .then(response => response.json())
  .catch(error => {
    console.log('CORS блокирует запрос!'); // Ошибка в консоли
  });

// ❌ Проблема — защита пользователя:
// Вредоносный сайт evil.com не должен 
// красть данные с bank.com!
 
// CORS требует явного разрешения от сервера

// Для сложных запросов браузер сначала отправляет OPTIONS:
 
// 1. Браузер: OPTIONS /api/data (preflight запрос)
// 2. Сервер: "Разрешаю!" (Access-Control-Allow-Origin: *)
// 3. Браузер: GET /api/data (настоящий запрос)
// 4. Сервер: Отправляет данные

// Сервер должен отправить заголовки:
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type, Authorization

// ✅ Сервер разрешает:
// Access-Control-Allow-Origin: * (все домены)
// Или конкретно:
// Access-Control-Allow-Origin: https://example.com

// ✅ Для разработки:
// 1. Использовать proxy сервер
// 2. Отключить CORS в браузере (только для тестов!)
// 3. Использовать расширения браузера

// ❌ Ошибка — думать, что сервер вернул ошибку:
fetch('https://api.other.com/data')
  .catch(error => {
    // Это CORS блокирует, не сервер!
  });
 
// ✅ Правильно — смотреть в Network tab в DevTools

// ❌ Плохо — разрешать всем:
// Access-Control-Allow-Origin: * 
// Для чувствительных данных!
 
// ✅ Лучше — ограничить конкретными доменами