【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"

参考サイト