正しく設定しないとこうなる
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に必要な設定がされていないことが原因だった。
以下、設定方法。
設定方法
- API一覧の中から該当APIをクリック
- リソースの中から該当リソース（例：
/hogefuga）をクリック -
アクションと書かれたプルダウンをクリック -
CORSの有効化をクリック -
Access-Control-Allow-Headersの項目に、独自ヘッダ名（x-foo-bar）をカンマ区切りで追加 -
CORSを有効にして既存のCORSヘッダーを置換と書かれたボタンをクリック - APIをデプロイ
- 完了