FastAPI - CORS(Cross-Origin Resource Sharing)

🌐 CORS 동작 방식 — 브라우저가 응답을 ‘검열’하는 순간

CORS는 요청을 막는 기술이 아니다.
정확히 말하면 브라우저가 응답을 사용할 수 있는지 판단하는 규칙이다.

서버는 요청을 정상적으로 처리하고 응답을 보낸다.
하지만 브라우저가 그 응답을 JavaScript에 넘겨줄지 말지를 결정한다.

예를 들어,
프론트엔드는 http://localhost:5500에서 실행 중이고,
백엔드는 http://localhost:8000에서 실행 중이라고 가정하자.
이 둘은 port number가 다르기 때문에 출처가 다르다.
❗️이때 브라우저는 보안 정책 때문에 다른 출처로의 요청을 기본적으로 차단한다.

🔄 전체 흐름 요약

[1] 프론트엔드 (다른 Origin)
        |
        |  API 요청
        v
[2] 백엔드 서버
        |
        |  정상 응답 + CORS 헤더
        v
[3] 브라우저
        |
        |  CORS 헤더 검사
        |
        |  ├─ 허용된 Origin → JavaScript에 응답 전달
        |  └─ 허용 안 됨 → CORS 에러 발생
        v
[4] 프론트엔드 JS

• 서버는 요청을 거부하지 않고
• 응답도 정상적으로 200 OK로 온다
• 브라우저가 JavaScript 접근만 차단한다

🧠 브라우저는 뭘 보고 판단할까?

브라우저는 응답 헤더에 포함된 CORS 관련 헤더를 확인한다.

Access-Control-Allow-Origin: http://localhost:5500
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type

❌ 왜 콘솔에만 에러가 뜰까?

CORS 에러를 처음 보면 헷갈리는 이유가 있다.

• Network 탭 → 200 OK
• Console 탭 → CORS 에러

이건 모순이 아니다.

요청은 성공했고, 응답도 도착했다.
단지 브라우저가 JavaScript 접근을 차단했을 뿐이다

---

📚 이론과 핵심 내용

🔒 브라우저의 보안 정책

⚠️ CORS는 서버 문제가 아니다

CORS 에러가 나면 서버가 잘못됐다고 생각하기 쉽다.
하지만 CORS는 브라우저의 보안 정책!

서버는 정상적으로 응답을 보낸다.
다만 브라우저가 그 응답을 JavaScript에서 사용하지 못하게 차단하는 것

실제로 개발자 도구의 Network 탭을 보면
응답은 200 OK인데 Console에는 CORS 에러가 찍혀 있다.

브라우저에는 동일 출처 정책(Same-Origin Policy)이라는 규칙이 있다.
웹 페이지의 JavaScript가 다른 출처의 데이터에 함부로 접근하지 못하게 막는 보안 장치다.

예를 들어 철수가 은행 사이트에 로그인한 상태라고 해보자.
동일 출처 정책이 없다면, 악성 사이트가 철수의 브라우저를 통해
은행 API를 호출해서 계좌 정보를 빼갈 수도 있다.

현대의 웹 서비스 구조는 프론트엔드와 백엔드가 분리되어 있는 경우가 많다.

• 프론트엔드 → 3000번 포트
• 백엔드 → 8000번 포트

정상적인 요청인데도 출처가 다르다는 이유로 막히면 곤란하다.
이 문제를 해결하기 위해 등장한 게 바로CORS

👉 백엔드가 브라우저에게
“이 출처에서 오는 요청은 허용한다”라고 알려주는 방식

---

🔁 CORS 동작 방식

[프론트엔드]
      |
      |  API 요청
      v
[백엔드]
      |
      |  응답 + CORS 헤더
      v
[브라우저]
      |
      |  CORS 헤더 검사
      |  ├─ 허용 → JS에서 응답 사용 가능
      |  └─ 차단 → CORS 에러
      v
[프론트엔드 JS]

서버는 응답 헤더에
“이 출처는 허용됨”이라는 정보를 담아 보낸다.

브라우저는 그 헤더를 보고 판단한다.
허용된 출처면 응답 데이터를 JavaScript에서 사용할 수 있게 한다.

---

⚙️ FastAPI에서 CORS 설정하기

FastAPI는 CORSMiddleware를 기본 제공한다.
기존 백엔드 코드에 미들웨어만 추가하면 된다.

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# 허용할 출처 목록
origins = [
    "http://localhost:5500",  # 프론트엔드 개발 서버
    "http://localhost:3000",  # React 등 프론트엔드
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,      # 허용할 출처
    allow_credentials=True,     # 쿠키 포함 요청 허용
    allow_methods=["*"],        # 모든 HTTP 메서드 허용
    allow_headers=["*"],        # 모든 HTTP 헤더 허용
)

@app.get("/")
async def root():
    return {"message": "CORS 설정 완료"}

서버를 재시작하고 다시 요청하면
이번에는 정상적으로 응답이 들어온다.

❗ 백엔드는 origins에 넣지 않는다

origins에는 프론트엔드 출처만 적는다.
백엔드 자기 자신은 포함하지 않는다.

origins = [
    "http://localhost:5500",
    "https://myapp.com"
]

---

🧩 CORSMiddleware 핵심 옵션

옵션	설명
allow_origins	허용할 출처 목록 (["*"] 가능)
allow_credentials	쿠키·Authorization 헤더 포함 요청 허용
allow_methods	허용할 HTTP 메서드
allow_headers	허용할 요청 헤더

⚠️ credentials + 와일드카드 주의

allow_credentials=True 상태에서는
allow_origins=["*"]를 사용할 수 없다.
(쿠키나 인증 정보를 포함하는 요청은 출처를 명확히 지정해야 함)

# ❌ 잘못된 설정 (동작 x)
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],					# 와일드카드
    allow_credentials=True,					# credentials 활성화
)

# ✅ 올바른 설정
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"], # 명시적 출처
    allow_credentials=True,
)

---

🧠 정리 및 요약

• Origin = 프로토콜 + 도메인 + 포트
• CORS는 서버 문제가 아니라 브라우저 정책
• 브라우저가 응답 사용 여부를 결정
• FastAPI에서는 CORSMiddleware로 해결
• credentials 사용 시 출처는 반드시 명시
• 서버는 “허용 여부를 헤더로 선언”만 한다
• 최종 판단은 항상 브라우저가 한다