API Gatewayに独自リクエストヘッダを追加するための設定

正しく設定しないとこうなる

API Gateway利用時に、カスタムヘッダをRequest Headerに追加してブラウザ（axios）からリクエストすると、OPTIONSメソッドのレスポンス時に下記のようなエラーが出てしまい、GETメソッドがリクエストされずに困った。

XMLHttpRequest cannot load https://aaabbbccc.ap-northeast-1.amazonaws.com/hogefuga. Request header field x-foo-bar is not allowed by Access-Control-Allow-Headers in preflight response.

これはAPI Gatewayに必要な設定がされていないことが原因だった。
以下、設定方法。

設定方法

1. API一覧の中から該当APIをクリック
2. リソースの中から該当リソース（例： /hogefuga ）をクリック
3. アクション と書かれたプルダウンをクリック
4. CORSの有効化 をクリック
5. Access-Control-Allow-Headers の項目に、独自ヘッダ名（ x-foo-bar ）をカンマ区切りで追加
6. CORSを有効にして既存のCORSヘッダーを置換 と書かれたボタンをクリック
7. APIをデプロイ
8. 完了