백엔드 기초집: Python FastAPILESSON 24

CORS와 프론트엔드 API 연동

난이도초급

예상 시간35분

선수지식이전 강의

24강. CORS와 프론트엔드 API 연동

1. 이번 강의에서 해결할 문제

Vite 개발 서버에서 FastAPI를 호출하면 브라우저의 same-origin 정책 때문에 응답 사용이 차단될 수 있습니다. 허용할 프론트엔드 출처만 명시합니다.

2. 학습 목표

3. 핵심 개념

Origin은 scheme, host, port의 조합이므로 http://localhost:5173과 http://localhost:8000은 다릅니다. CORS는 브라우저가 읽을 수 있는 응답을 서버가 허용하는 규칙이며 인증을 대신하지 않습니다. credential이나 Authorization header를 사용할 때 무조건 *를 허용하지 말고 정확한 origin을 나열합니다.

4. 단계별 코드 예시

파일 경로: game-ranking-api/app/main.py

app/main.py
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

from app.config import settings

app = FastAPI(title="Game Ranking API")
app.add_middleware(
    CORSMiddleware,
    allow_origins=list(settings.frontend_origins),
    allow_credentials=False,
    allow_methods=["GET", "POST", "PATCH", "DELETE", "OPTIONS"],
    allow_headers=["Authorization", "Content-Type"],
)

파일 경로: game-ranking-frontend/src/api/records.js

src/api/records.js
const API_URL = import.meta.env.VITE_API_URL;

export async function createRecord(input, token) {
  const response = await fetch(`${API_URL}/records`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${token}`,
    },
    body: JSON.stringify(input),
  });

  if (!response.ok) {
    const error = await response.json();
    throw new Error(error.detail ?? '기록 저장에 실패했습니다.');
  }
  return response.json();
}

파일 경로: game-ranking-frontend/.env.local

.env.local
VITE_API_URL=http://127.0.0.1:8000

실행 위치: 백엔드와 프론트엔드의 각 프로젝트 루트

# game-ranking-api/
python -m uvicorn app.main:app --reload

# game-ranking-frontend/
npm run dev

5. 코드가 동작하는 이유

브라우저의 preflight OPTIONS 요청에 middleware가 허용 origin, method, header를 응답합니다. 실제 POST는 JSON과 Authorization header를 보내며 서버 인증 dependency가 token을 검사합니다. CORS가 허용돼도 유효한 token이 없으면 401입니다.

6. 자주 하는 실수와 해결법

7. 직접 실습

8. 이해 점검 질문 3개

9. 핵심 요약

MINI QUIZ