개요

"javascript에서 API Gateway에 요청할 수 있는지 먼저 시도하고 싶습니다."
그럴 때는 브라우저 콘솔을 사용하면 락틴(^와^*)

...라고 하는 것으로, 브라우저에 javascript 의 fetch 메소드를 넣어 리퀘스트하기로 하겠습니다!

이번에는 그 방법의 메모

환경

API Gateway는 API Key에서 액세스 제어를 수행한다고 가정합니다.

참고

Amazon API Gateway에서 API 키 인증 설정

출처

브라우저 콘솔에 입력하는 소스

fetch('API GatewayのURL', {headers: {"x-api-key": "API key をここに打つ"}}).then(response => response.json());

// sample
fetch('https://hogehoge12345.execute-api.us-east-2.amazonaws.com/xxxxxxx/sample', {headers: {"x-api-key": "abcdefghijklmnopqrstuvwxyz"}}).then(response => response.json());

// もしアクセス制御を一切行っていないのであれば、'headers': {} なしでよい
fetch('https://hogehoge12345.execute-api.us-east-2.amazonaws.com/xxxxxxx/sample').then(response => response.json());

참고

MDN web docs / Fetch 사용
fetch 메소드의 사용법이 쓰여져 있다

요청 결과 확인

여기를 클릭하면 확인할 수 있습니다.

내용

error 대처

콘솔에 이런 오류가 발생할 수 있음

# エラー文
Access to fetch at 'https://url' from origin 'https://hoge' has been blocked by CORS policy:
  No 'Access-Control-Allow-Origin' header is present on the requested resource.

If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

이것은 API Gateway의 "CORS 활성화"라는 작업을 수행하면 피할 수 있습니다.
※단, URL이나 API Key가 잘못되었을 때도 왠지 이 에러가 나왔다...왜

참고

AWS/API Gateway 콘솔을 사용하여 리소스에서 CORS 사용
CORS 활성화 방법이 작성되었습니다. AWS 공식 문서

어쨌든 CORS를 아는 ...는 이미 끝난다.
CORS 자체에 대한 이해를 높이는 좋은 기사

React와 AWS API Gateway의 연동 방법
CORS 활성화 외에도 API Gateway의 전체 설정에 대한 설명이 있습니다

결론

인터넷의 바다 정보만으로 어떻게 든 API Gateway에 요청할 수 있었습니다.
이번에는 React로 문의 할거야 (*˙︶˙*)و굿!