Что такое CORS и как его обрабатывать в Node?

Question

Accepted Answer

**CORS** (Cross-Origin Resource Sharing) — это механизм безопасности браузера, который контролирует, может ли веб-страница с одного **источника** делать запросы к серверу на **другом источнике**. По умолчанию браузеры блокируют кроссоригинные запросы; сервер должен явно разрешить их через заголовки ответа.

## Почему это важно

```text
Origin = scheme + host + port. These are DIFFERENT origins:
  https://app.example.com   →  https://api.example.com   (different host)
  http://localhost:3000     →  http://localhost:4000      (different port)

Browser blocks the cross-origin request UNLESS the server sends CORS headers allowing it.
```

So a React app on `localhost:3000` calling an API on `localhost:4000` is cross-origin — the browser blocks it unless the API opts in.

## Ключевые заголовки ответа

```text
Access-Control-Allow-Origin: https://app.example.com   ← who is allowed
Access-Control-Allow-Methods: GET, POST, PUT, DELETE   ← allowed methods
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true                 ← allow cookies/auth
```

Сервер контролирует доступ, отправляя эти заголовки. Браузер их читает и решает, разрешить ли странице видеть ответ.

## Обработка CORS в Express

```js
import cors from "cors";

// ❌ allow everything — convenient but insecure for credentialed/private APIs
app.use(cors());

// ✅ restrict to specific trusted origins
app.use(cors({
  origin: ["https://app.example.com", "http://localhost:3000"], // allowlist
  methods: ["GET", "POST", "PUT", "DELETE"],
  credentials: true, // allow cookies — REQUIRES a specific origin (not "*")
}));
```

Промежуточное программное обеспечение `cors` устанавливает заголовки для вас. Для production **ограничьте `origin` белым списком** вместо `*` — и учтите, что разрешение учетных данных (`credentials: true`) несовместимо с подстановочным знаком `*`.

## Preflight запросы

```text
For "non-simple" requests (PUT/DELETE, custom headers, JSON), the browser first
sends an OPTIONS "preflight" request to check permissions. The cors middleware
handles responding to it automatically.
```

## Частое неправильное понимание

```text
CORS is enforced by the BROWSER, not the server. It does NOT protect your API
from non-browser clients (curl, Postman, other servers) — those ignore CORS.
It only governs what browser JavaScript on other origins can do.
```

## Почему это важно

CORS — один из самых частых камней преткновения в веб-разработке — практически каждая установка front-end-к-API сталкивается с ним (особенно в локальной разработке с разными портами).

Понимание *почему* это существует (безопасность same-origin браузера), как сервер выбирает через заголовки, как безопасно его настроить (белые списки источников, осторожная обработка учетных данных) и критический факт, что это механизм *браузера* (не авторизация API) необходимо для правильного и безопасного подключения фронтендов к API-интерфейсам Node без блокировки или чрезмерного раскрытия сервера.