【AWS API Gateway】 에러 해결 방법 ~ 「blocked by CORS policy: No 'Access-Control-Allow-Origin' header 」

증상

AWS API Gateway에서 생성한 API에 GET 통신을 하면 움직이지 않게 되었기 때문에 Chrome의 검증 화면을 보면 이런 오류가 나왔다.

Access to XMLHttpRequest at 'https://xxxxxxx.execute-api.ap-northeast-1.amazonaws.com/xxxxx/xxxxx' 
from origin 'http://xxxxx.co.jp' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header 
is present on the requested resource.

해결 방법

AWS API Gateway에서 CORS를 활성화합니다.

액션 > 메소드 만들기


OPTIONS를 선택하고 옆의 체크 표시를 클릭하십시오.


셋업 화면이 나오지만, 여기는 무엇을 입력해도 영향이 없는 것 같기 때문에, 입력 항목이 없는 mock 에서도 체크해, 보존.



메소드 응답을 클릭


▶를 클릭


헤더 추가


응답 추가


아래 추가
· Access-Control-Allow-Headers
· Access-Control-Allow-Methods
· Access-Control-Allow-Origin



통합 응답


이미 방금 입력한 것이 반영되어 있다.
오른쪽 가장자리의 연필 마크를 클릭하여 매핑 값을 입력합니다.

위에서
· 'Content-Type,X-Amz-Date,Authorization,X-Requested-With,X-Requested-By,X-Api-Key'
· 'GET, POST'
· '*'



GET > 메소드 응답


확장하여 "헤더 추가"


Access-Control-Allow-Origin 만 추가


CORS 사용






API 배포

이제 에러는 나오지 않고 API에 GET 통신할 수 있었다.

P.S.

단지, 아직 이런 에러가 남아 있다.
API는 정상적으로 동작하지만 걱정된다. (미해결)

Refused to get unsafe header "ETag"

참고 사이트