はじめに

みなさんAWSはお好きですか？(笑)
私はどうにも苦手なのですが、最近はAWSとも仲良くしていく必要があり、うる覚えだった知識を再度掘り起こしながら調整しています。
今回はその過程で出たcors有効化時のエラーについて対処法をまとめておこうと思います。

エラー解消方法

表示されていたエラーは以下になります。

名称を見たらなんとなく何をすべきなのかわかるのですが、具体的に何をどう追加すれば解消するのか手順をまとめます。

まず怒られている原因はエラーの内容通りoriginを捌けないからなので、post側の設定を確認します。
メソッドレスポンス項目を選択すると現状は何も設定がないかと思います。

ここに設定がないことが原因で怒られているので、怒られている対象の設定を追加します。
追加する場合はレスポンスの追加から調整可能です。

httpのステータス欄に２００画像右端のチェックマークを選択
すると以下画面が作成されるかと思います。

上記と同様の状態になりましたら、ヘッダーの追加からヘッダー情報を追加します。
今回怒られている対象は、Access-Control-Allow-Originに対してなので、ヘッダーには左記パラメータを追加してチェックボタンを選択します。

これでヘッダー情報の付与は完了です。
deployを行うことで反映されますので、忘れず対応しましょう。

この状態で再度CORS有効化を実行すると、成功するかと思います。

そのうち理解を深めるためにCORSとは何かという記事もまとめたいと思います！