Есть ли какие-либо ограничения на запросы?

Ограничения на запросы в браузере

Да, существует множество ограничений на HTTP запросы, которые браузер накладывает из соображений безопасности, производительности и стандартизации. Это критически важно для фронтенд-разработчика.

1. Same-Origin Policy (SOP)

Same-Origin Policy — фундаментальное ограничение безопасности. Браузер запрещает скрипты с одного источника (origin) обращаться к ресурсам другого источника без разрешения.

Origin определяется как: scheme + domain + port

// Примеры origin
https://example.com:443/page      // origin: https://example.com
https://api.example.com:443       // origin: https://api.example.com (ДРУГОЙ!)
https://example.com:8080          // origin: https://example.com:8080 (ДРУГОЙ!)

// SOP в действии
const data = await fetch("https://different-domain.com/api/data");
// Ошибка: CORS error!

Решение: CORS (Cross-Origin Resource Sharing)

// Запрос с CORS заголовками
const response = await fetch("https://api.different-domain.com/data", {
  method: "GET",
  headers: {
    "Content-Type": "application/json"
  }
});

// Браузер добавляет автоматически:
// Origin: https://example.com

// Сервер должен ответить:
// Access-Control-Allow-Origin: https://example.com
// или
// Access-Control-Allow-Origin: *

Preflight запрос (OPTIONS)

Для сложных запросов браузер отправляет автоматический preflight запрос:

// Сложный запрос (вызывает preflight)
const response = await fetch("https://api.example.com/data", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "X-Custom-Header": "value"
  },
  body: JSON.stringify({ data: "test" })
});

// Браузер сначала отправляет OPTIONS запрос:
// OPTIONS /data HTTP/1.1
// Origin: https://example.com
// Access-Control-Request-Method: POST
// Access-Control-Request-Headers: content-type,x-custom-header

// Сервер отвечает разрешением, затем отправляется реальный POST

2. Ограничение на размер тела запроса

Промышленные браузеры имеют ограничения на размер тела запроса (обычно 2GB), но на практике серверы часто имеют меньшие лимиты.

// Это может быть отклонено сервером
const largeData = new Array(100000000).fill("x").join("");
const response = await fetch("/api/upload", {
  method: "POST",
  body: largeData // Может быть слишком большим
});

// Лучше использовать FormData и загрузку по частям
const formData = new FormData();
formData.append("file", fileBlob);

const response = await fetch("/api/upload", {
  method: "POST",
  body: formData // Браузер автоматически обрабатывает
});

3. Ограничение на количество одновременных соединений

Браузер ограничивает количество одновременных TCP соединений к одному серверу:

// Различные браузеры имеют разные лимиты
// Chrome: ~6 соединений на домен
// Firefox: ~6 соединений на домен
// Safari: ~6 соединений на домен

// Если делать много запросов, они встают в очередь
Promise.all([
  fetch("/api/data1"),
  fetch("/api/data2"),
  fetch("/api/data3"),
  fetch("/api/data4"),
  fetch("/api/data5"),
  fetch("/api/data6"),
  fetch("/api/data7"), // Эти запросы будут ждать!
  fetch("/api/data8")
]);

// Решение: используй HTTP/2 (множественный мультиплексинг)
// или разбей на разные домены

4. Timeout (Ограничение по времени)

Браузер автоматически отменяет запросы, которые висят слишком долго. Обычно это 30 секунд или больше.

// Fetch API не имеет встроенного timeout
// Нужно использовать AbortController

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 секунд

try {
  const response = await fetch("/api/long-request", {
    signal: controller.signal
  });
  clearTimeout(timeoutId);
  return response;
} catch (error) {
  if (error.name === "AbortError") {
    console.log("Request timeout");
  }
  throw error;
}

5. Content Security Policy (CSP)

CSP — это заголовок безопасности, который ограничивает ресурсы, которые страница может загружать.

// Если CSP запрещает запросы к определённому домену
// Заголовок: Content-Security-Policy: default-src self

// Это будет заблокировано (не cross-origin!)
const response = await fetch("https://external-api.com/data");
// Ошибка: Refused to connect because it violates the CSP

// Разрешённые запросы (только к своему серверу)
const response = await fetch("/api/data"); // OK

6. Mixed Content (HTTP на HTTPS странице)

Mixed Content — это запросы HTTP с HTTPS страницы. Браузер их блокирует.

// На странице https://example.com
// Этот запрос будет заблокирован
const response = await fetch("http://api.example.com/data");
// Ошибка: Mixed Content: The page was loaded over HTTPS,
// but requested an insecure resource

// Решение: используй HTTPS везде
const response = await fetch("https://api.example.com/data"); // OK

7. Заголовок Authorization и Cookie

По умолчанию Fetch API не отправляет cookies и авторизацию при cross-origin запросах.

// Cookies НЕ будут отправлены
const response = await fetch("https://api.example.com/protected");

// Решение: используй credentials option
const response = await fetch("https://api.example.com/protected", {
  credentials: "include" // Отправляет cookies
});

// Или явно указывай заголовок Authorization
const response = await fetch("https://api.example.com/protected", {
  headers: {
    "Authorization": `Bearer ${token}`
  }
});

8. Ограничение на методы запроса

Симпле запросы (Simple Requests) имеют ограничения на методы:

// Простые методы (без preflight)
// GET, HEAD, POST

// Сложные методы (с preflight)
// PUT, DELETE, PATCH, OPTIONS, CONNECT, TRACE

const response = await fetch("/api/data", {
  method: "DELETE" // Это вызовет preflight запрос
});

9. X-Frame-Options (Clickjacking защита)

Сервер может запретить встраивание страницы в iframe.

<!-- Если сервер отправляет X-Frame-Options: DENY -->
<iframe src="https://example.com/page"></iframe>
<!-- Это не будет работать -->

10. Service Worker и Cache

Service Worker может перехватывать запросы и кешировать их.

// service-worker.js
self.addEventListener("fetch", (event) => {
  if (event.request.url.includes("/api/")) {
    // Кеш первым, потом сеть
    event.respondWith(
      caches.match(event.request)
        .then((response) => {
          return response || fetch(event.request)
            .then((response) => {
              caches.open("v1").then((cache) => {
                cache.put(event.request, response.clone());
              });
              return response;
            });
        })
    );
  }
});

Практические рекомендации

1. Обработай CORS ошибки

interface FetchOptions {
  url: string;
  options?: RequestInit;
  timeout?: number;
}

async function safeFetch({ url, options, timeout = 5000 }: FetchOptions) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), timeout);

  try {
    const response = await fetch(url, {
      ...options,
      signal: controller.signal
    });

    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }

    return response;
  } catch (error) {
    if (error instanceof TypeError && error.message.includes("Failed to fetch")) {
      throw new Error("CORS error or network unavailable");
    }
    throw error;
  } finally {
    clearTimeout(timeoutId);
  }
}

2. Используй environment переменные для URL

// .env.local
REST_API_URL=https://api.example.com

// lib/api.ts
const API_URL = process.env.REACT_APP_API_URL || "http://localhost:3000/api";

export const fetchData = async () => {
  const response = await fetch(`${API_URL}/data`);
  return response.json();
};

3. Используй fetch wrapper

export async function apiCall(
  endpoint: string,
  options?: RequestInit
): Promise<any> {
  const response = await fetch(`${process.env.REACT_APP_API_URL}${endpoint}`, {
    headers: {
      "Content-Type": "application/json",
      ...options?.headers
    },
    ...options
  });

  if (!response.ok) {
    throw new Error(`API error: ${response.status}`);
  }

  return response.json();
}

Итог

Основные ограничения на запросы:

• SOP (Same-Origin Policy) — требует CORS для cross-origin запросов
• Размер тела — ограничено сервером
• Одновременные соединения — ~6 на домен
• Timeout — обычно 30+ секунд
• CSP — ограничивает разрешённые домены
• Mixed Content — HTTP на HTTPS странице запрещён
• Authorization — требует явной передачи при cross-origin

Понимание этих ограничений критично для разработки безопасных и функциональных веб-приложений.