【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"
参考サイト
Author And Source
この問題について(【AWS API Gateway】エラー解決方法 〜「blocked by CORS policy: No 'Access-Control-Allow-Origin' header 」), 我々は、より多くの情報をここで見つけました https://qiita.com/tatsuya1970/items/05b3dbe4c55d693cbe1d著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .