Может ли браузер запретить запрос если не сделана обработка в Backend?

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

Да, браузер может запретить запрос, даже если Backend готов его обработать. Это связано с политикой Same-Origin Policy и CORS (Cross-Origin Resource Sharing), которые браузер enforce на уровне клиента.

Same-Origin Policy

Same-Origin Policy — это фундаментальное правило безопасности браузера, которое ограничивает запросы между разными origin-ами (схема + хост + порт):

// Если фронтенд на https://example.com
// Эти запросы считаются CROSS-ORIGIN и будут заблокированы:
fetch('https://api.other-domain.com/data'); // Другой домен
fetch('https://example.com:8080/data');     // Другой порт
fetch('http://example.com/data');           // Другая схема (HTTP vs HTTPS)

Браузер заблокирует ответ на клиенте, хотя Backend вполне мог обработать запрос.

CORS ошибки

Если Backend не настроил CORS headers, браузер заблокирует запрос:

// Frontend код
fetch('https://api.other-domain.com/users')
  .then(r => r.json())
  .catch(e => console.error('CORS error:', e));

Ошибка в консоли браузера:

Access to XMLHttpRequest at 'https://api.other-domain.com/users' 
from origin 'https://example.com' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on requested resource.

Запрос МОЖЕТ быть отправлен на Backend (preflight проверит это), но ответ браузер не вернёт фронтенду.

Как Backend должен обработать CORS

Backend обязан отправить правильные заголовки:

# FastAPI пример
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://example.com"],  # Разрешённые origin-ы
    allow_credentials=True,
    allow_methods=["GET", "POST", "PUT", "DELETE"],
    allow_headers=["*"],
)

@app.get("/users")
async def get_users():
    return {"users": []}

Preflight запросы

Для сложных запросов (POST, PUT, DELETE с custom headers), браузер отправляет preflight OPTIONS запрос:

// Фронтенд код
fetch('https://api.other-domain.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Custom-Header': 'value'  // Custom header
  },
  body: JSON.stringify({ name: 'John' })
});

Браузер сначала отправляет:

OPTIONS /users HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type, x-custom-header

Если Backend не ответит нужными CORS headers, браузер заблокирует основной запрос.

Примеры блокировок браузером

1. Запрос на другой домен без CORS

// Будет заблокирован браузером
fetch('https://different-domain.com/api/data');

2. Cookie с cross-origin запросом

// Требует credentials и правильного CORS
fetch('https://api.example.com/data', {
  credentials: 'include' // Отправить куки
});

3. Custom headers без CORS

// Custom headers требуют preflight
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer token',
    'X-Request-ID': '123'
  }
});

Обход CORS (не рекомендуется)

1. Backend proxy (правильный способ)

// Вместо прямого запроса к внешнему API
fetch('/api/proxy/external-data'); // Твой Backend делает запрос

2. JSONP (устарело)

// JSONP обходит CORS, но небезопасно
<script src="https://api.external.com/data?callback=myFunction"></script>

3. Headers с отключением CORS (неправильно)

// Это НЕ поможет — CORS проверяется браузером
fetch('https://other-domain.com/data', {
  headers: {
    'Access-Control-Allow-Origin': '*' // На фронте это не работает!
  }
});

Коды ошибок

В контексте React

// src/lib/api.ts
export async function fetchFromApi(url: string, options?: RequestInit) {
  try {
    const response = await fetch(url, {
      ...options,
      credentials: 'include', // Отправлять куки если нужны
      headers: {
        'Content-Type': 'application/json',
        ...options?.headers,
      },
    });

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

    return await response.json();
  } catch (error) {
    // CORS ошибки будут пойманы здесь
    console.error('Fetch error:', error);
    throw error;
  }
}

Итог

Да, браузер может запретить запрос, даже если Backend готов его обработать:

• Same-Origin Policy ограничивает cross-origin запросы
• CORS headers от Backend требуются для разрешения
• Preflight запросы проверяют разрешение на сложные операции

Это фундаментальная защита браузера от CSRF атак и других уязвимостей.