S3 に画像をアップロードする別のラムダ関数を呼び出す API ゲートウェイをセットアップしようとしています。この機能は、POSTMAN などのアプリを使用している場合はうまく機能しますが、React を使用してブラウザーを実行すると、次のエラーが発生します。
Access to fetch at 'https://.../upload' from origin 'http://localhost:3000' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
私のAPIゲートウェイには、そのメソッド用に次の構成があります
Gateway Responses for UserUpload API: default 4XX (not checked), default 5XX (not checked)
Methods: post (checked), options (checked)
Access-Control-Allow-Methods: options, post
Access-Control-Allow-Headers: '*'
Access-Control-Allow-Origin: '*'
この API はオーソライザーを使用します。私はAuth0 が提供するものを使用しており、コードをまったく編集していません。
そして、オーソライザーが呼び出す関数は、以下のような応答を返します (例: ハッピー パス):
exports.handler = async (event) => {
//do data checks and upload to s3
return {
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Methods": "*",
"Access-Control-Allow-Origin": "*",
},
statusCode: 200,
body: JSON.stringify({ message: "success" }),
};
ラムダ関数、認証プロバイダー、API ゲートウェイの両方を設定するのはこれが初めてなので、明らかな何かが欠けている可能性があります。また、フェッチ POST リクエストに追加しようとしましmode: no-corsたが、それでも非常によく似た方法で失敗します。
オーソライザーと画像をアップロードするラムダ関数のログを見ると、それらが呼び出されていないことがわかります。そのため、CORS エラーは API Gateway にあるようです。
いくつかのチュートリアルで、aws テンプレート yaml ファイルにオプションを追加することを見てきましAddDefaultAuthorizerToCorsPreflightたFalse。これは API Gateway コンソールのどこにも表示されません。
更新:カスタムオーソライザーをオフにして機能をテストしましたが、機能します。したがって、CORS は options メソッドと、ラムダ関数で返されるリクエストに対して機能することがわかっています。問題なのはカスタムオーソライザーです。
現在の流れは次のとおりです。
- メソッドリクエスト - 認証: my-auth-0-authorizer
- 統合リクエスト - タイプ: Lambda_proxy
- ラムダ関数
- 統合応答 - [グレー表示されたプロキシ統合は、応答を変換するように構成できません]
- メソッドの応答: HTTP ステータス: プロキシ (
Access-Control-Allow-Origin応答ヘッダーに含まれる)
オーソライザーが CORS 構成を尊重できるようにするには、何を変更するか、変更する必要がありますか?
更新: API ゲートウェイを 1 日放置した後、成功した応答が機能するようになりました (上記のフローを使用)。システムに不具合があったのか、予期せぬ事態が発生したのかはわかりませんが、現在は機能しています。まだ CORS の問題が発生していますが、現在は応答が悪いだけです。
カスタムオーソライザーが失敗しreturn context.fail("Unauthorized");、これが発生すると、ブラウザーで CORS エラーが発生します。4XX 応答に対して特別なゲートウェイ応答をセットアップする必要がありますか?