2. CORS 설정과 미들웨어 구현

2.1 CORS란?

CORS(Cross-Origin Resource Sharing)는 웹 브라우저에서 보안상의 이유로 다른 출처(Origin)의 리소스에 접근하는 것을 제한하는 정책입니다. 예를 들어, http://localhost:5500에서 실행되는 프론트엔드가 http://localhost:8000에서 실행되는 FastAPI 서버에 요청을 보내면 CORS 에러가 발생합니다.

어떠한 프로세스를 거쳐 CORS가 가능한지 알아보겠습니다.

브라우저: "hey, example.com에 요청을 보내려고 하는데..."
- Origin: myapp.com
- 요청 메서드: POST
- 요청 헤더: Content-Type: application/json
브라우저가 자동으로 "preflight" 요청을 보냄 (OPTIONS 메서드)
- "이런 요청을 보내도 될까요?"
서버가 응답
- Access-Control-Allow-Origin: myapp.com
- Access-Control-Allow-Methods: POST
- Access-Control-Allow-Headers: Content-Type
- "네, 그런 요청을 보내도 좋습니다!"
브라우저: "서버가 허용한다고 하니, 이제 실제 요청을 보내겠습니다" (실제 POST 요청 전송)

여기서 중요한 포인트는 브라우저가 차단을 먼저 하는 것이 아니라 서버에 "허가"를 먼저 요청합니다. 서버의 CORS 설정은 이 "허가"에 대한 응답입니다. 응답을 받으면 브라우저가 차단하는 것이죠.

이러한 CORS 에러를 해결하기 위해서는 서버에서 특정 출처의 요청을 허용하도록 설정해야 합니다. FastAPI에서는 CORSMiddleware를 통해 별도의 라이브러리 설치 없이 이를 쉽게 구현할 수 있습니다.

2.2 CORS 미들웨어 설정

먼저 필요한 모듈을 설치합니다. 뒤에서 필요한 sqlalchemy 모듈, pydantic 모듈도 함께 설치합니다.

pip install fastapi uvicorn sqlalchemy pydantic

pip install fastapi uvicorn sqlalchemy pydantic

다음과 같이 CORS 미들웨어를 설정합니다.

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
 
app = FastAPI()
 
# CORS 미들웨어 설정
app.add_middleware(
    CORSMiddleware,
    # allow_origins=["http://localhost:5500"],  # 프론트엔드 주소
    allow_origins=["*"],  # 수업에서는 모든 출처를 허용합니다.
    allow_credentials=True,
    allow_methods=["*"],  # 모든 HTTP 메서드 허용
    allow_headers=["*"],  # 모든 HTTP 헤더 허용
)
 
@app.get("/")
async def read_root():
    return {"Hello": "World"}

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
 
app = FastAPI()
 
# CORS 미들웨어 설정
app.add_middleware(
    CORSMiddleware,
    # allow_origins=["http://localhost:5500"],  # 프론트엔드 주소
    allow_origins=["*"],  # 수업에서는 모든 출처를 허용합니다.
    allow_credentials=True,
    allow_methods=["*"],  # 모든 HTTP 메서드 허용
    allow_headers=["*"],  # 모든 HTTP 헤더 허용
)
 
@app.get("/")
async def read_root():
    return {"Hello": "World"}

2.3 간단한 예제

이제 프론트엔드와 백엔드를 연동하는 간단한 예제를 만들어보겠습니다.

2.3.1 백엔드

main.py 파일로 작성됩니다.

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
 
app = FastAPI()
 
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)
 
@app.get("/api/hello")
async def read_root():
    return {"message": "안녕하세요!"}

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
 
app = FastAPI()
 
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)
 
@app.get("/api/hello")
async def read_root():
    return {"message": "안녕하세요!"}

2.3.2 프론트엔드 (index.html)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>CORS 테스트</title>
</head>
<body>
    <h1>CORS 테스트</h1>
    <button onclick="fetchMessage()">메시지 가져오기</button>
    <p id="message"></p>
 
    <script>
        async function fetchMessage() {
            try {
                const response = await fetch('http://localhost:8000/api/hello');
                const data = await response.json();
                document.getElementById('message').textContent = data.message;
            } catch (error) {
                console.error('Error:', error);
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>CORS 테스트</title>
</head>
<body>
    <h1>CORS 테스트</h1>
    <button onclick="fetchMessage()">메시지 가져오기</button>
    <p id="message"></p>
 
    <script>
        async function fetchMessage() {
            try {
                const response = await fetch('http://localhost:8000/api/hello');
                const data = await response.json();
                document.getElementById('message').textContent = data.message;
            } catch (error) {
                console.error('Error:', error);
            }
        }
    </script>
</body>
</html>

2.4 실행 방법

백엔드 서버 실행

uvicorn main:app --reload

uvicorn main:app --reload

프론트엔드 실행

VS Code의 Live Server 확장을 사용하여 index.html을 실행합니다.
기본적으로 http://localhost:5500 에서 실행됩니다.

버튼을 클릭하면 백엔드 서버로부터 메시지를 가져와 화면에 표시합니다. CORS가 정상적으로 설정되었다면 오류 없이 메시지가 표시될 것입니다.

이제 기본적인 CORS 설정이 완료되었습니다. 다음 장에서는 이를 바탕으로 실제 블로그 기능을 구현해보도록 하겠습니다.

FastAPI 베이스캠프

CORS 설정과 미들웨어 구현