CORS란 무엇이며 Node에서 어떻게 처리하나요?

Question

Accepted Answer

**CORS**(Cross-Origin Resource Sharing)는 한 **출처(origin)**의 웹 페이지가 **다른 출처**의 서버에 요청할 수 있는지를 제어하는 브라우저 보안 메커니즘입니다. 기본적으로 브라우저는 교차 출처 요청을 차단하며, 서버가 응답 헤더를 통해 명시적으로 허용해야 합니다.

## 동일 출처 정책(same-origin policy)과 문제

```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.
```

따라서 `localhost:3000`의 React 앱이 `localhost:4000`의 API를 호출하는 것은 교차 출처입니다. API가 허용하지 않으면 브라우저가 차단합니다.

## 핵심 응답 헤더

```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
```

서버는 이 헤더들을 보내 접근을 제어합니다. 브라우저는 이를 읽고 페이지가 응답을 볼 수 있는지 결정합니다.

## Express에서 CORS 처리

```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` 미들웨어가 헤더를 대신 설정해 줍니다. 프로덕션에서는 `*` 대신 **`origin`을 허용 목록(allowlist)으로 제한**하세요. 그리고 자격 증명 허용(`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는 웹 개발에서 가장 흔한 걸림돌 중 하나입니다. 거의 모든 프론트엔드-API 구성에서 이를 마주칩니다(특히 다른 포트를 쓰는 로컬 개발에서).

*왜* 존재하는지(브라우저 동일 출처 보안), 서버가 헤더로 어떻게 허용하는지, 안전하게 설정하는 방법(출처 허용 목록, 신중한 자격 증명 처리), 그리고 이것이 (API 인가가 아닌) *브라우저* 메커니즘이라는 핵심 사실을 이해하는 것은 차단되거나 서버를 과도하게 노출하지 않으면서 프론트엔드를 Node API에 올바르고 안전하게 연결하는 데 필수적입니다.