🌊
API Gateway+Lambda CORS対策(Lambdaプロキシ統合 FastAPI編)
年末年始、アイディアはあったものの時間がなく開発できていなかったものを一気に仕上げました。最初はユーザ数が見込めないので従量課金の簡単に開発することができる今となってはありふれたアーキテクチャであるAPI Gateway+Lambdaで開発したのですが、その際にReactでつくったwebアプリからAPIを呼び出す際のCORSの対応で時間を使ったので備忘録と残しておきます。
背景・問題
今回のアーキテクチャです。Reactで作られたWebアプリからFastAPIで作成したAPIをLambdaにデプロイし、API Gateway経由でよんでいます。この際に適切に設定をしてあげないと、CORSでエラーが返ってきます。
今回のアーキテクチャ
前提知識
基本的なFastAPIの内容やLambdaのデプロイ、API Gatewayの設定方法はこちらの記事がとてもわかりやすいです。
CORSの設定
わかればとても簡単です。/{proxy+}を選択した状態でアクションボタンを押下し、'CORSの有効化'を選択してください。
各自の設定で有効化すると、下記のようになるのでCORSが有効化されます。下記の画像のようになっていたら成功です。
私はここで/に対してCORSの有効化をしていたため、無駄に時間を使ってしまいました。。。
Discussion