[Web] CORS란 무엇인가?

CORS 에러란 (Cross-Origin Resource Sharing)

웹 개발을 하다 보면 API 요청을 보내고 응답을 받는 동작을 수행하는데, 특정 사이트에서 다른 도메인의 서버로 AJAX 요청을 보내면 CORS 에러가 발생하는 경우를 자주 접하게 된다.

이상하게 Postman 등과 같이 개발 환경에서 오류 없이 잘 실행되지만 브라우저에서 CORS 오류가 발생한다.

이는 웹 브라우저에서 발생하는 보안 정책을 의미하며, 보안상의 이유로 동일 출처 정책을 적용하여, 동일한 출처에서만 리소스를 요청할 수 있도록 제한한다.

 

CORS란 웹 브라우저에서 동작하는 보안 메커니즘 중 하나이다. 웹 브라우저에서는 보안 상의 이유로 동일 출처(same origin)에서만 리소스에 접근할 수 있다. 이때 동일 출처란, 프로토콜, 호스트, 포트 모두가 같은 경우를 말한다.

그러나 다른 출처의 리소스에 접근이 필요한 경우가 발생하는데 이때 CORS가 사용된다.

 

CORS는 서버가 클라이언트에게 리소스에 대한 접근 권한을 부여하는 메커니즘으로 동작하며, 서버는 HTTP 헤더를 통해 클라이언트에게 허용된 출처, 메서드, 헤더 등의 정보를 전달한다.

이를 토대로 브라우저는 리소스에 접근할 수 있는지를 결정하고, 접근이 허용된 경우에만 리소스를 가져와 사용할 수 있다. (CORS 허용)

 

 

[ CORS 요청 방식 ]

• Simple Request: 기본 요청 O. 접근 거부 시 응답 X
• Preflight Request: 일부 복잡한 요청에 대해서는 사전 요청을 보내고 서버의 허용 여부를 확인

 

SOP (Same Origin Policy)

CORS 에러가 발생하는 주요 이유가 바로 SOP라고 볼 수 있다.

 

웹 브라우저에서 동일 출처에서만 리소스를 접근할 수 있으며 이는 웹 브라우저의 보안을 강화하기 위해 도입되었다.

악의적인 웹 사이트가 사용자의 개인 정보를 탈취하는 등의 보안 위험을 방지하기 위해 사용된다.

 

CORS를 해결할 수 있는 방법은?

서버 측에서 CORS 헤더를 올바르게 설정하거나, Proxy 서버를 사용하여 리소스를 중계하는 방법, JSONP(JSON with Padding)를 사용하는 방법 등이 있다. 또는 클라이언트 측에서 웹 브라우저 CORS 제약을 피하기 위해 Access-Control-Allow-Origin과 같은 확장 프로그램을 사용할 수도 있다.

 

💡 웹 브라우저는 SOP 보안 정책을 기본값으로 두며 CORS 허용 시에만 서로 다른 출처끼리 요청을 주고받을 수 있다.