[CORS] AWS API GW Setting하여 CORS 문제 해결하기

AWS내에서 CORS (Cross-origin resource sharing)를 설정하는 방법을 설명합니다.

 

먼저 CORS 이해를 위해 아래 참조 바랍니다.

 

교차 출처 리소스 공유(Cross-origin resource sharing, CORS), 교차 출처 자원 공유는 웹페이지 상의 제한된 리소스를
최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조이다.
다만 특정 교차 도메인 간(cross-domain) 요청, 특히 Ajax 요청은 동일-출처 보안 정책에 의해 기본적으로 금지된다.

CORS는 교차 출처 요청을 허용하는 것이 안전한지 아닌지를 판별하기 위해 브라우저와 서버가 상호 통신하는 하나의 방법을 정의한다.

순수하게 동일한 출처 요청보다 더 많은 자유와 기능을 허용하지만 단순히 모든 교차 출처 요청을 허용하는 것보다 더 안전하다.

CORS의 사양은 원래 W3C 권고안으로 배포되었으나, 해당 문서는 쓸모 없어진(obsolete) 상태이다.

Header

Request header

• Origin
• Access-Control-Request-Method
• Access-Control-Request-Headers

Response header

• Access-Control-Allow-Origin
• Access-Control-Allow-Credentials
• Access-Control-Expose-Headers
• Access-Control-Max-Age
• Access-Control-Allow-Methods
• Access-Control-Allow-Headers

 

 

 

Chrom Browser의 개발자 도구로 확인하였을 경우 아래와 같이 CORS Policy로 인해 문제가 발생된 것을 알수가 있습니다.

 

기본 적으로 Backend 서비스에서 CORS가 적용되어야 하고,

API GW에서 인증이 걸려 있을 경우, API GW에서 CORS를 설정하여 주어야 합니다.

 

자 이제 부터 AWS에서 CORS가 필요한 경우 어떻게 변경 셋팅을 하는지 아래 참조 바랍니다.

• Enable CORS

 

 

• Select “Enable CORS replace existing CORS headers”
• 몇가지 부분에서 Error 나는 경우가 있고, Header 자동 생성되는 경우가 있었다

 

• 생성된 Resource의 Option method 선택

 

• Method Response Select

 

 

• HTTP 200 Respose에 대한 Header 정의를 위해 200선택

 

 

• Header 정의

 

 

• Integration Response 선택

 

• 해당 200 선택

 

• Header Mapping

 

• Allow 필요한 Header 설정
  여러 custom Header가 포함되어 있으면 전부 list up 해주거나, '*'로 정의.

 

 

• 마지막으로 변경된 API GW 설정을 Deploy 해주며 마무리 합니다.