13
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【AWS API Gateway】エラー解決方法 〜「blocked by CORS policy: No 'Access-Control-Allow-Origin' header 」

Last updated at Posted at 2021-08-14

##症状
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を有効にする。

アクション > メソッドの作成
Image from Gyazo

OPTIONS を選び、横のチェックマークをクリックする
Image from Gyazo

セットアップ画面が出るが、ここは何を入力しても影響がないらしいので、入力項目がない mock にでもチェックして、保存。

Image from Gyazo

メソッドレスポンスをクリック
Image from Gyazo

「▶」をクリック
Image from Gyazo

ヘッダーの追加
Image from Gyazo

レスポンスの追加
Image from Gyazo

以下追加する
・Access-Control-Allow-Headers
・Access-Control-Allow-Methods
・Access-Control-Allow-Origin

Image from Gyazo

統合レスポンス
Image from Gyazo

すでに先ほど入力したのが反映されている。
右端の鉛筆マークをクリックしてマッピングの値を入力する。
Image from Gyazo
上から
・'Content-Type,X-Amz-Date,Authorization,X-Requested-With,X-Requested-By,X-Api-Key'
・'GET,POST'
・'*'

Image from Gyazo

GET > メソッドレスポンス
Image from Gyazo

展開して「ヘッダーの追加」
Image from Gyazo

Access-Control-Allow-Origin のみ追加
Image from Gyazo

CORSの有効化
Image from Gyazo

Image from Gyazo

Image from Gyazo

APIをデプロイ

これで、エラーは出ず、APIにGET通信できた。

##P.S.
ただ、まだこんなエラーが残っている。
APIは正常に動作するけど気になる。(未解決)

Refused to get unsafe header "ETag"

##参考サイト
https://dev.classmethod.jp/articles/amazon-api-gateway-cors/



13
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?