Choorai | 문서
자주 발생하는 에러

CORS 에러 해결하기

"Access to XMLHttpRequest blocked by CORS policy" 에러가 발생했나요? 프론트엔드와 백엔드가 다른 도메인에 있을 때 흔히 발생하는 문제입니다.

TL;DR (핵심 요약)

백엔드 서버에서 Access-Control-Allow-Origin 헤더를 설정하세요. 개발 중에는 *로, 프로덕션에서는 실제 도메인을 지정하세요.

심각코드: 403

Access to XMLHttpRequest at 'http://api.example.com' from origin 'http://localhost:3000' has been blocked by CORS policy

원인

프론트엔드(localhost:3000)가 다른 도메인의 백엔드(api.example.com)에 요청을 보냈지만, 백엔드가 이 요청을 허용하지 않았습니다.

해결책
Access-Control-Allow-Origin: https://your-frontend.com

프레임워크별 해결 방법

Python FastAPI

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

app = FastAPI()

# CORS 설정
app.add_middleware(
    CORSMiddleware,
    allow_origins=[
        "http://localhost:3000",      # 개발 환경
        "https://your-domain.com",    # 프로덕션
    ],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

Node.js Express

server.js
const express = require('express');
const cors = require('cors');

const app = express();

// CORS 설정
app.use(cors({
  origin: [
    'http://localhost:3000',
    'https://your-domain.com'
  ],
  credentials: true
}));

보안 주의

프로덕션에서는 allow_origins=["*"]를 사용하지 마세요! 실제 프론트엔드 도메인만 허용해야 합니다.

해결 확인 방법

  1. 백엔드 서버를 재시작합니다
  2. 브라우저 개발자 도구(F12) → Network 탭을 엽니다
  3. 요청을 다시 보내고 Response Headers를 확인합니다
  4. Access-Control-Allow-Origin 헤더가 있으면 성공!

관련 문서

환경 변수 에러

process.env.XXX is undefined

인증/쿠키 문제

쿠키가 전송되지 않는 문제