【AWS API Gateway】 에러 해결 방법 ~ 「blocked by CORS policy: No 'Access-Control-Allow-Origin' header 」
5163 단어 CORSAPIGatewayAWS
증상
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를 활성화합니다.
액션 > 메소드 만들기
![](https://s1.md5.ltd/image/5b4b4163542d493fffc9d75e7370ec53.png)
OPTIONS를 선택하고 옆의 체크 표시를 클릭하십시오.
![](https://s1.md5.ltd/image/1e16ce7aec2bb2acb97ca69606cff876.png)
셋업 화면이 나오지만, 여기는 무엇을 입력해도 영향이 없는 것 같기 때문에, 입력 항목이 없는 mock 에서도 체크해, 보존.
![](https://s1.md5.ltd/image/9584808bd7d9cb9b2d4bdd1bf2608d9e.png)
메소드 응답을 클릭
![](https://s1.md5.ltd/image/0a52410da9554d61ad4e2278f728d3e6.png)
▶를 클릭
![](https://s1.md5.ltd/image/56c49fb15236521c897987f93748a227.png)
헤더 추가
![](https://s1.md5.ltd/image/df1af1c9f15a9ae14c7e0238d3dee6ef.png)
응답 추가
![](https://s1.md5.ltd/image/66f935b9d746288ea833a53813b6bf85.png)
아래 추가
· Access-Control-Allow-Headers
· Access-Control-Allow-Methods
· Access-Control-Allow-Origin
![](https://s1.md5.ltd/image/222374c190aeed5422bb1ee16f30e396.png)
통합 응답
![](https://s1.md5.ltd/image/924f9f8b0d60858ec1bd8271d0a39be2.png)
이미 방금 입력한 것이 반영되어 있다.
오른쪽 가장자리의 연필 마크를 클릭하여 매핑 값을 입력합니다.
![](https://s1.md5.ltd/image/977a9af5d7eed46f8a8cfd91efc5b505.png)
위에서
· 'Content-Type,X-Amz-Date,Authorization,X-Requested-With,X-Requested-By,X-Api-Key'
· 'GET, POST'
· '*'
![](https://s1.md5.ltd/image/2ae88ebeacae22e889282bcf3437abb4.png)
GET > 메소드 응답
![](https://s1.md5.ltd/image/641fd43dabf6bf71994e9d14535274d5.png)
확장하여 "헤더 추가"
![](https://s1.md5.ltd/image/6947212155c165843ab5e1cb2c16c526.png)
Access-Control-Allow-Origin 만 추가
![](https://s1.md5.ltd/image/d17e26219843d6a932fc561a007ff910.png)
CORS 사용
![](https://s1.md5.ltd/image/40229c95fa3c5ca85934bd2f5c097168.png)
![](https://s1.md5.ltd/image/92503ea65036398f301b980d81cf6095.png)
![](https://s1.md5.ltd/image/5fc8e527d3b6cb019274540fd279c8ca.png)
API 배포
이제 에러는 나오지 않고 API에 GET 통신할 수 있었다.
P.S.
단지, 아직 이런 에러가 남아 있다.
API는 정상적으로 동작하지만 걱정된다. (미해결)
Refused to get unsafe header "ETag"
참고 사이트
Reference
이 문제에 관하여(【AWS API Gateway】 에러 해결 방법 ~ 「blocked by CORS policy: No 'Access-Control-Allow-Origin' header 」), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tatsuya1970/items/05b3dbe4c55d693cbe1d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)