HTTP/Guides/Cross-Origin Resource Sharing (CORS)/CORS errors

김동현·2026년 3월 22일

mdn 학습 번역 - Web Technology

목록 보기

27/28

안녕하세요! 프론트엔드 개발의 세계로 오신 것을 환영합니다. 🎉

프론트엔드 개발을 하다 보면 누구나 한 번쯤 마주치고, 때로는 우리를 깊은 절망에 빠뜨리는 아주 유명한 에러가 하나 있죠. 바로 CORS 에러입니다! 외부 API를 가져다 쓰려고 할 때 시뻘건 글씨로 콘솔을 가득 채우는 그 녀석 맞습니다.

오늘은 이 공식 문서를 통해 CORS 에러가 도대체 무엇인지, 어떻게 원인을 찾고 해결할 수 있는지 차근차근 구어체로 설명해 드릴게요. 제가 실무에서 겪었던 팁들도 팍팍 넣어드릴 테니 걱정 말고 따라오세요!

CORS 에러 (CORS errors)

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 서버가 브라우저의 엄격한 동일 출처 정책(same-origin policy)을 살짝 완화해 줄 수 있도록 해주는 표준 기술입니다.
이 기술은 기본적으로 막혀있는 '다른 출처(Cross-Origin)'로의 요청 중 일부는 명시적으로 허용하고, 나머지는 여전히 거부하기 위해 사용됩니다. 예를 들어, 어떤 웹사이트가 다른 사이트에서도 위젯처럼 퍼가서 쓸 수 있는 서비스(embeddable service)를 제공한다면, 특정 보안 제한을 풀어줄(완화할) 필요가 있겠죠.

하지만 이런 CORS 설정을 완벽하게 구성하는 것은 생각보다 쉽지 않고 여러 가지 난관에 부딪히기 마련입니다. 이 페이지들에서는 우리가 자주 마주치는 대표적인 CORS 에러 메시지들을 살펴보고, 이를 어떻게 해결할 수 있는지 파헤쳐 보겠습니다.

만약 서버나 클라이언트의 CORS 설정이 올바르게 되어 있지 않다면, 브라우저의 콘솔 창에는 다음과 같은 무시무시한 에러가 나타날 겁니다.

"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [some site]"
(해석: 교차 출처 요청 차단됨: 동일 출처 정책으로 인해 [어떤 사이트]에 있는 원격 리소스를 읽을 수 없습니다.)

이 에러는 방금 여러분이 보낸 요청이 CORS 보안 규칙을 위반해서 브라우저에 의해 차단되었음을 의미합니다. 하지만 오해하지 마세요! 이게 반드시 설정 실수를 의미하는 건 아닐 수도 있습니다. 사용 중인 웹 애플리케이션이나 외부 원격 서비스가 보안상의 이유로 의도적으로 해당 요청을 막아둔 것일 수도 있거든요. 하지만, 그 API 엔드포인트가 원래 접근 가능해야 하는 게 맞다면(예: 공공 API 등), 성공적인 통신을 위해 약간의 디버깅 작업이 필수적입니다.

💡 강사의 실무 TIP!
초보 개발자분들이 가장 많이 오해하시는 부분이 "내 자바스크립트 코드(프론트엔드)가 잘못돼서 CORS 에러가 났다!"라고 생각하는 거예요. 사실 CORS 에러는 여러분의 잘못이라기보다는, 브라우저가 여러분을 보호하기 위해 방어막을 친 것입니다. 에러를 해결하는 가장 빠르고 정확한 방법은 데이터를 제공하는 백엔드 서버 쪽에서 응답 헤더(Response Header)에 프론트엔드의 주소를 허용해 달라고(Access-Control-Allow-Origin) 요청하는 것입니다.

CORS 문제 식별하기 (Identifying a CORS issue)

CORS 설정에 도대체 무슨 근본적인 문제가 있는지 파악하려면, 정확히 어떤 요청이 문제인지 그리고 왜 문제가 발생했는지 찾아내야 합니다. 다음 단계들이 원인을 찾는 데 큰 도움이 될 거예요:

문제가 발생하고 있는 웹사이트나 웹 앱 페이지로 이동한 다음, 브라우저의 개발자 도구 (Developer Tools)를 엽니다. (보통 F12 키나 우클릭 후 '검사'를 누르면 되죠!)
이제 에러가 나던 그 작업(예: 버튼 클릭, 데이터 저장 등)을 다시 똑같이 실행해 봅니다. 그리고 콘솔(console) 탭을 확인해서 CORS 위반 에러 메시지가 떠 있는지 확인하세요. 아마 아래 이미지와 비슷하게 생겼을 겁니다:

Firefox console showing CORS error

에러 메시지의 텍스트는 대략 다음과 같은 형태일 거예요:

Cross-Origin Request Blocked: The Same Origin Policy disallows
reading the remote resource at https://some-url-here. (Reason:
additional information here).

참고 (Note):
보안상의 이유로, CORS 요청이 구체적으로 어떻게, 왜 실패했는지에 대한 상세한 정보는 자바스크립트 코드 단에서는 절대 알 수 없도록 막혀 있습니다. 자바스크립트 코드가 알 수 있는 건 오직 "에러가 났다"라는 사실 하나뿐이에요. 구체적으로 무엇이 잘못되었는지 알아내는 유일한 방법은 개발자가 직접 브라우저의 콘솔 창을 열어서 세부 정보를 확인하는 것뿐입니다.

💡 강사의 실무 TIP!
"왜 자바스크립트로 에러 상세 내용을 못 보게 막아뒀을까요?"
만약 악의적인 해커가 여러분의 사이트에 몰래 심어둔 스크립트로 다른 서버들을 찔러보며 상세한 에러 로그를 수집할 수 있다면, 그 서버의 구조나 네트워크 환경을 쉽게 파악할 수 있겠죠? 이를 막기 위해 브라우저는 에러의 상세 내역을 개발자 도구(사람의 눈)로만 보여주고, 코드(프로그램)에는 넘겨주지 않는 거랍니다.