CORS 에러란

CORS를 다루기 전에 동일 출처 정책(Same-Origin Policy)에 대한 이해가 필요합니다. 동일 출처 정책이란 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식입니다. 이 정책은 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여줍니다. 동일 출처 정책은 이러한 이유로 사용자 보안을 위해 브라우저에 기본 구현되어 있습니다.

동일 출처 정책에서 말하는 출처에 대해 이해하기 위해 아래 영화 리스트 조회 URL을 예시로 확인해 볼게요.

아래 이미지와 같이 영화 리스트 조회 URL의 구조를 살펴보면 프로토콜, 호스트, 포트, 패스가 존재합니다.

이 중에서 프로토콜, 호스트, 포트를 합쳐서 출처(Origin)라고 부릅니다.

CORS 란

Cross-Origin Resource Sharing의 약자로, 우리말로 직역하면 교차 출처 리소스 공유라는 뜻입니다. 의미 그대로 서로 다른 출처에서 리소스를 공유하는 것을 CORS라고 합니다. 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념입니다. 웹 애플리케이션을 만들 때, 출처가 다른 자원들을 가져와 사용해야 하는 경우 CORS 설정이 필요합니다. 이러한 설정은 자원을 제공하는 백엔드 서버에서 허용된 출처라고 명시해 주면 됩니다.

필요한 설정을 하지 않은 채 서로 다른 출처에서 리소스를 공유하려고 하면 브라우저에서 동일 출처 정책에 따라 허용되지 않은 교차 출처 리소스 공유에 대해 CORS 에러가 발생할 수 있습니다.

CORS 에러 해결

CORS에러를 해결하는 방법을 크게 두 가지로 나눠서 살펴볼 수 있는데요.

• 먼저 백엔드 서버 개발자에게 에러가 발생하는 출처를 허용하도록 Access-Control-Allow-Origin 설정을 요청하는 방법이 있습니다.
• CORS 허용을 위한 설정 요청을 할 수 없는 경우, 동일 출처 정책을 강제하지 않는 proxy 서버를 활용해 우회하는 방법이 있습니다. Next.js의 경우 rewrites 를 활용할 수 있습니다. (참고)