Cross-Origin Resource Sharing: 웹 브라우저로 리소스 요청하기

웹 개발을 하다 보면 브라우저 콘솔에 Access to fetch at 'https://example.com' from origin 'http://localhost:3000' has been blocked by CORS policy와 같은 에러 메시지를 접하게 된다. 이는 대부분 CORS(Cross-Origin Resource Sharing) 정책으로 인해 발생하는 문제이다.

 

CORS는 웹 보안 정책 중 하나로, 브라우저가 다른 출처(origin)에 있는 리소스를 요청할 경우 서버가 이를 명시적으로 허용하지 않으면 요청을 차단하도록 설계되어 있다. 여기서 출처란 도메인, 포트, 프로토콜이 모두 동일한 경우를 말한다. 예를 들어 http://localhost:3000과 https://api.example.com은 서로 다른 출처로 간주된다.

 

브라우저는 이러한 요청이 발생하면 먼저 Preflight 요청(OPTIONS 메서드)을 보낸다. 이 요청에 대해 서버가 Access-Control-Allow-Origin 헤더로 해당 출처를 허용한다는 응답을 보내야만 실제 리소스 요청이 수행된다. 만약 이 응답이 없거나 제한적이라면 브라우저는 보안상 요청을 차단하게 된다.

 

 

 

중요한 점은 CORS는 브라우저에서 실행되는 클라이언트 측 JavaScript에만 적용된다는 것이다. 즉, AWS SDK나 CLI처럼 서버에서 직접 S3에 접근하는 경우에는 CORS 설정이 필요하지 않다. 이 경우에는 오히려 IAM 권한이 더 중요한 역할을 하게 된다.

 

CORS는 리소스 보안과 브라우저의 신뢰성을 확보하기 위한 메커니즘으로, 브라우저가 서버 리소스를 요청할 때 발생할 수 있는 잠재적 보안 문제를 방지하는 역할을 한다. 클라이언트가 브라우저 기반이라면, 리소스를 제공하는 서버는 적절한 CORS 설정을 통해 허용 정책을 선언해야 한다.