【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を有効にする。

アクション > メソッドの作成
[![Image from Gyazo](https://i.gyazo.com/5b4b4163542d493fffc9d75e7370ec53.png)](https://gyazo.com/5b4b4163542d493fffc9d75e7370ec53)

OPTIONS を選び、横のチェックマークをクリックする
[![Image from Gyazo](https://i.gyazo.com/1e16ce7aec2bb2acb97ca69606cff876.png)](https://gyazo.com/1e16ce7aec2bb2acb97ca69606cff876)

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


[![Image from Gyazo](https://i.gyazo.com/9584808bd7d9cb9b2d4bdd1bf2608d9e.png)](https://gyazo.com/9584808bd7d9cb9b2d4bdd1bf2608d9e)


メソッドレスポンスをクリック
[![Image from Gyazo](https://i.gyazo.com/0a52410da9554d61ad4e2278f728d3e6.png)](https://gyazo.com/0a52410da9554d61ad4e2278f728d3e6)

「▶」をクリック
[![Image from Gyazo](https://i.gyazo.com/56c49fb15236521c897987f93748a227.png)](https://gyazo.com/56c49fb15236521c897987f93748a227)

ヘッダーの追加
[![Image from Gyazo](https://i.gyazo.com/df1af1c9f15a9ae14c7e0238d3dee6ef.png)](https://gyazo.com/df1af1c9f15a9ae14c7e0238d3dee6ef)

レスポンスの追加
[![Image from Gyazo](https://i.gyazo.com/66f935b9d746288ea833a53813b6bf85.png)](https://gyazo.com/66f935b9d746288ea833a53813b6bf85)

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

[![Image from Gyazo](https://i.gyazo.com/222374c190aeed5422bb1ee16f30e396.png)](https://gyazo.com/222374c190aeed5422bb1ee16f30e396)


統合レスポンス
[![Image from Gyazo](https://i.gyazo.com/924f9f8b0d60858ec1bd8271d0a39be2.png)](https://gyazo.com/924f9f8b0d60858ec1bd8271d0a39be2)


すでに先ほど入力したのが反映されている。
右端の鉛筆マークをクリックしてマッピングの値を入力する。
[![Image from Gyazo](https://i.gyazo.com/977a9af5d7eed46f8a8cfd91efc5b505.png)](https://gyazo.com/977a9af5d7eed46f8a8cfd91efc5b505)
上から
・'Content-Type,X-Amz-Date,Authorization,X-Requested-With,X-Requested-By,X-Api-Key'
・'GET,POST'
・'*'

[![Image from Gyazo](https://i.gyazo.com/2ae88ebeacae22e889282bcf3437abb4.png)](https://gyazo.com/2ae88ebeacae22e889282bcf3437abb4)

GET > メソッドレスポンス
[![Image from Gyazo](https://i.gyazo.com/641fd43dabf6bf71994e9d14535274d5.png)](https://gyazo.com/641fd43dabf6bf71994e9d14535274d5)

展開して「ヘッダーの追加」
[![Image from Gyazo](https://i.gyazo.com/6947212155c165843ab5e1cb2c16c526.png)](https://gyazo.com/6947212155c165843ab5e1cb2c16c526)

Access-Control-Allow-Origin のみ追加
[![Image from Gyazo](https://i.gyazo.com/d17e26219843d6a932fc561a007ff910.png)](https://gyazo.com/d17e26219843d6a932fc561a007ff910)

CORSの有効化
[![Image from Gyazo](https://i.gyazo.com/40229c95fa3c5ca85934bd2f5c097168.png)](https://gyazo.com/40229c95fa3c5ca85934bd2f5c097168)

[![Image from Gyazo](https://i.gyazo.com/92503ea65036398f301b980d81cf6095.png)](https://gyazo.com/92503ea65036398f301b980d81cf6095)

[![Image from Gyazo](https://i.gyazo.com/5fc8e527d3b6cb019274540fd279c8ca.png)](https://gyazo.com/5fc8e527d3b6cb019274540fd279c8ca)


APIをデプロイ

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


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

```
Refused to get unsafe header "ETag"
```

<br>

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

<br><br>