본문으로 건너뛰기
Ears 홈Ears.
바이브코딩 용어사전에러 사전

CORS

CORS(Cross-Origin Resource Sharing)는 브라우저가 다른 출처(도메인·포트)의 API 호출을 기본 차단하는 보안 정책과 그 예외 허용 규격으로, 'blocked by CORS policy' 에러는 서버가 내 웹사이트 출처를 허용 목록에 안 넣었다는 뜻입니다.

최종 업데이트

바이브코딩 입문 후 처음 만나는 벽 1순위예요. 콘솔에 Access to fetch ... has been blocked by CORS policy가 뜨면 이 항목입니다.

무슨 일이 일어난 건가요?

브라우저는 localhost:3000에서 열린 내 앱이 api.example.com을 호출하면 — 출처(origin)가 다르므로 — 서버가 명시적으로 허용했는지 확인합니다. 서버 응답에 "그 출처 허용함"(Access-Control-Allow-Origin 헤더)이 없으면 브라우저가 응답을 버려요. 중요한 사실 두 가지:

  1. 막는 주체는 브라우저입니다. 그래서 같은 요청이 서버(백엔드)에서 하면 잘 되고, Postman에서도 잘 됩니다. "포스트맨에선 되는데요?"가 CORS의 시그니처예요.
  2. 고치는 곳은 서버입니다. 프론트엔드 코드를 아무리 고쳐도 해결 안 됩니다.

해결 경로

  • 내 서버라면: 서버에서 내 앱의 출처를 허용 (프레임워크마다 CORS 설정 한 줄)
  • 남의 API라면: 내 백엔드(API 라우트)가 대신 호출하고 결과를 프론트에 넘기는 프록시 패턴 — 이게 정석입니다. API 키도 숨겨지는 부수 효과가 있어요
  • 브라우저 보안 끄기, 아무 출처나 허용(*)하고 배포 — 둘 다 하지 마세요

AI에게 시키기

브라우저에서 외부 API를 직접 fetch하니 CORS 에러가 나.
Next.js API 라우트로 프록시를 만들어서 서버가 대신 호출하게 바꿔줘.
API 키는 프론트에 노출되지 않게 서버 환경변수에서 읽고.

"CORS 에러 고쳐줘"라고만 하면 AI가 프론트 코드를 헛수정하는 경우가 많아요. 프록시로 우회라는 방향을 지정하면 한 번에 갑니다.

관련 용어