CORS

Posted on | In | 0 comments

오류

배포가 끝난 후, 개발자 모드에서 계속 신경쓰이는 에러메시지가 있었다. cors 관련 에러였는데 이게 무엇인지 몰랐기에 이번 포스팅엔 이 부분을 정리하려 한다.

/* 오류 메시지 */
Access to Font at 'http://s3.ap-northeast-2.amazonaws.com/toy-study-room/static/admin/fonts/Roboto-Light-webfont.woff' from origin '{ 내 도메인 주소 }' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '{ 내 도메인 주소 }' is therefore not allowed access.

CORS(Cross-Origin-Resource-Share)

CORS(Cross-origin 리소스 공유)는 한 도메인에서 로드되어 다른 도메인에 있는 리소스와 상호 작용하는 클라이언트 웹 애플리케이션에 대한 방법을 정의합니다.

AWS S3

참고 공식 문서
AWS S3는 CORS를 이용하여 다양한 기능의 클라이언트 측 웹 애플리케이션을 구축하고, AWS S3 리소스에 대한 cross-origin 접근을 선택적으로 허용할 수 있다고 한다. 현재 위 오류는 공식 문서에 나온 시나리오2의 경우였다.

시나리오 2: S3 버킷에서 웹 글꼴을 호스팅하려는 경우를 예로 들어 보겠습니다. 브라우저는 웹 글꼴을 불러오기 위해 CORS 검사(preflight check라고도 함)가 필요하므로, 이 웹 글꼴을 호스팅하는 버킷이 이러한 요청을 하는 오리진을 허용하도록 구성합니다.

버킷에서 CORS 구성

에러를 해결하기 위해선 글꼴을 호스팅하는 버킷이 요청을 허용하도록 구성해야 한다. 요청 허용 설정을 위해 AWS S3 - 권한 - CORS구성 메뉴로 들어간다. 이곳에 들어가면 처음보는 문구들이 쓰여있다.

<!-- Sample policy -->
<CORSConfiguration>
	<CORSRule>
		<AllowedOrigin>*</AllowedOrigin>
		<AllowedMethod>GET</AllowedMethod>
		<MaxAgeSeconds>3000</MaxAgeSeconds>
		<AllowedHeader>Authorization</AllowedHeader>
	</CORSRule>
</CORSConfiguration>
  • AllowedOrigin : 교차 도메인 요청을 허용하는 오리진을 지정한다.
  • AllowedMethod : GET,PUT,POST,DELETE,HEAD 설정 가능
  • MaxAgeSeconds : 리소스, HTTP 메서드, 오리진으로 식별되는 preflight 요청에 대한 응답을 캐시할 수 있는 시간초 지정. 원래 요청이 반복되는 경우 브라우저는 이 응답을 캐시함으로써 요청을 다시 보낼 필요가 없다.
  • AllowedHeader : Access-Control-Request-Header 를 통해 preflight요청에 허용되는 헤더를 지정한다. AWS S3는 요청된 응답에서 허용된 헤더만 보낸다.
    • Authorization : 요청 인증에 필요한 정보를 가지고 있다.

CORS 작성하기

<CORSRule>
  <AllowedOrigin>{ 내 도메인 주소 }</AllowedOrigin>
  <AllowedMethod>GET</AllowedMethod>
  <MaxAgeSeconds>3000</MaxAgeSeconds>
</CORSRule>

내 도메인 주소를 오리진으로 지정하고, 따로 인증이 없어도 허용할수 있도록 하기 위해 AllowedHeader를 작성하지 않았다.