섹션 6.2: CORS 설정

학습 시간: 30분

1. CORS: 무엇이며 왜 필요한가?

우리가 알아냈듯이, CORS (Cross-Origin Resource Sharing)는 브라우저의 보안 정책입니다. 이는 악성 사이트 evil-site.com이 사용자 대신(사용자의 쿠키를 사용하여) your-bank.com에 요청을 보내 데이터를 훔치는 상황을 방지합니다.

작동 방식은?

도메인 A의 프론트엔드 (브라우저)가 도메인 B에서 데이터를 가져오려 합니다.
브라우저는 도메인 B에 OPTIONS 메서드로 특별한 "사전" 요청(preflight request)을 보내 "도메인 B님, 도메인 A인 제가 GET 요청을 보내도 될까요?"라고 묻습니다.
백엔드 (도메인 B의 서버)는 특별한 HTTP 헤더, 예를 들어 Access-Control-Allow-Origin: A로 응답해야 합니다.
서버 응답이 요청을 허용하면 브라우저는 기본 GET 요청을 보냅니다. 허용하지 않으면 요청을 차단하고 CORS 오류를 발생시킵니다.

💡 우주 비유:

함장을 외계 스테이션으로 순간 이동시키기 전에 (POST 요청을 보내기 전에), 함선(브라우저)은 드론(OPTIONS 요청)을 보내 "스테이션, '엔터프라이즈' 함선으로부터의 순간 이동을 허용하십니까?"라고 묻습니다. 스테이션(API)은 "예, '엔터프라이즈'로부터의 수신이 허용됩니다"(Access-Control-Allow-Origin 헤더)라고 응답합니다. 그 후에야 순간 이동이 시작됩니다.

2. Laravel에서 CORS 설정 (Laravel 11+의 현대적인 접근 방식)

Laravel 11+에서는 CORS 구성이 훨씬 간단해졌으며, 기본 설정만 필요하다면 config/cors.php 파일을 게시할 필요가 없습니다. 모든 것은 .env 파일과 bootstrap/app.php를 통해 관리됩니다.

1단계: 환경 변수를 통한 설정

.env 파일을 엽니다. Laravel은 기본적으로 API의 CORS 관리를 위한 변수를 이미 제공합니다.

# .env

# ... 기타 변수

# CORS가 적용될 경로를 지정합니다.
# 'api/*' - 모든 API 경로에 대한 표준 값.
CORS_PATHS=api/*

# 허용된 출처(도메인)를 지정합니다.
# 개발용으로 프론트엔드의 주소를 지정하십시오.
# 쉼표로 구분할 수 있으며 공백은 없습니다.
CORS_ALLOWED_ORIGINS=http://localhost:5500,http://127.0.0.1:5500

# 기타 설정 (일반적으로 기본값 유지 가능)
CORS_ALLOWED_METHODS=*
CORS_ALLOWED_HEADERS=*
CORS_EXPOSED_HEADERS=
CORS_MAX_AGE=0
CORS_SUPPORTS_CREDENTIALS=false

주요 변수:

CORS_ALLOWED_ORIGINS: 가장 중요한 변수. 여기에 요청이 허용되는 도메인들을 나열합니다. *는 모두에게 허용하지만, 이는

프로덕션 환경에서는 극히 안전하지 않습니다.

CORS_PATHS: 이 규칙이 적용되는 경로. api/*는 /api/로 시작하는 모든 것을 의미합니다.

php artisan serve를 사용하는 경우, .env 변경 후 서버를 재시작할 필요가 없습니다. 변경 사항은 자동으로 반영됩니다.

2단계 (선택 사항): bootstrap/app.php의 고급 설정

더 복잡한 로직(예: 패턴을 사용하여 서브도메인 허용)이 필요한 경우, 구성 파일을 게시하고 미들웨어를 설정해야 합니다. 그러나 95%의 경우에는 .env 파일만으로 충분합니다.

php artisan install:api 명령어는 bootstrap/app.php 파일에서 API 경로에 대한 기본 CORS 미들웨어를 자동으로 설정합니다. 다음과 같습니다:

// bootstrap/app.php
->withMiddleware(function (Middleware $middleware) {
    // 이 줄은 install:api 명령어를 통해 이미 추가될 것입니다.
    // 이는 모든 API 경로에 대한 CORS 처리를 활성화합니다.
    $middleware->api(base_path('routes/api.php'));
})

->api() 내부에서 Laravel은 이미 .env 파일에서 설정을 읽는 HandleCors 미들웨어를 사용합니다. 모든 것이 간단하고 즉시 사용 가능합니다.

⚠️ 중요! API가 완전히 공개되어 있지 않다면 프로덕션 서버에서 CORS_ALLOWED_ORIGINS='*'를 사용하지 마십시오. 이는 잠재적인 취약점을 야기합니다. 항상 프론트엔드의 특정 도메인을 나열하십시오.

3. FastAPI에서 CORS 설정

FastAPI는 CORS와 같은 교차 작업을 처리하기 위해 미들웨어 개념을 사용합니다.

1단계: 애플리케이션의 메인 파일 열기

이 파일은 FastAPI 인스턴스를 생성하는 파일입니다 (일반적으로 main.py).

2단계: CORSMiddleware 추가

FastAPI는 CORS 설정을 위한 준비된 미들웨어를 제공합니다.

# main.py
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware # 1. 미들웨어 임포트

app = FastAPI(
    title="SpaceAPI",
    description="API for managing planets in the galaxy",
    version="1.0.0"
)

# 2. 허용된 출처(origins) 목록
origins = [
    "http://localhost:5500",
    "http://127.0.0.1:5500",
    # 프로덕션 환경에서는 여기에 프론트엔드의 도메인이 올 것입니다.
    # "https://my-awesome-app.com",
]

# 3. 애플리케이션에 미들웨어 추가
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,  # 지정된 출처 허용
    allow_credentials=True, # 쿠키 허용 (인증에 필요할 수 있음)
    allow_methods=["*"],    # 모든 메서드 허용 (GET, POST 등)
    allow_headers=["*"],    # 모든 헤더 허용
)

# ... 여기에 라우터 및 나머지 코드

3단계: Uvicorn 서버 재시작 Uvicorn 서버는 일반적으로 코드 변경 시 자동으로 재시작됩니다. 그렇지 않다면 수동으로 재시작하십시오. 이제 FastAPI 서버는 프론트엔드로부터의 OPTIONS 요청에 올바르게 응답할 것입니다.

복습 퀴즈

🚀 장 요약:

이제 당신은 "성간 통신 외교관"이 되었습니다! 귀하의 API는 이제 현대적이고 올바른 접근 방식을 사용하여 외부 애플리케이션과 안전하게 상호 작용할 수 있습니다. - ✅ CORS 및 사전 요청의 작동 원리를 이해했습니다. - 🔧 .env 파일을 통해 Laravel 11+용 CORS를 설정했습니다. - ⚙️ CORSMiddleware를 사용하여 FastAPI용 CORS를 설정했습니다. - 🛰️ 프런트엔드와 백엔드 간의 연결을 성공적으로 설정했습니다.

통신 브릿지가 구축되었고 보호됩니다. 이제 이 브릿지를 통해 "인가된 직원"만 허용하는 방법에 대해 생각해 볼 수 있습니다.

📌 확인:

성공의 주요 기준은 프런트엔드에서 데이터를 요청할 때 브라우저 콘솔에 CORS 오류가 없는 것입니다.

개발자 도구의 "네트워크" 탭에서 API에 대한 두 가지 요청을 볼 수 있습니다: 첫 번째는 OPTIONS 메서드 (상태 200/204)를 사용하는 요청이고, 두 번째는 GET 메서드 (상태 200)를 사용하는 요청입니다. 이것은 CORS 작동 방식의 명확한 증거입니다.