JavascriptでAPI gatewayを呼び出そうとしたら、こんなエラーが出た。
Access to XMLHttpRequest at '' from origin '' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
メッセージの内容通りだが、これはAPI gateway側でCORS（別ドメインからのアクセス許可設定）がされていないことが原因。
API gatewayのCORSの設定は以下のようなステップになる。
(1) まずはAPI gatewayのコンソール画面で、対象のリソースを選択し、「アクション」ボタンから「CORSの有効化」を選択
(2) 「CORSを有効にして既存のCORSヘッダーを置換」を押下。CORSの有効化処理が実行され、プロセス項目の緑のチェックがつく。
(3) 次に左のメニューから「ゲートウェイのレスポンス」を選択。「アクセスが拒否されました」にチェックを入れ、「編集」ボタンを押下
(4) 赤枠の個所に以下の通り入力する
レスポンスヘッダー：Access-Control-Allow-Origin
値：'*'（シングルクオート、アスタリスク、シングルクオート）
(5) リソースのツリー階層から「/」をクリックし、「アクション」プルダウンから「APIのデプロイ」を選択。以降は通常のデプロイと同じ操作のため割愛。
これでフロントからJavascriptで呼び出せば正常にレスポンスが返ってくるようになります。
Have a nice coding life!
