APIGWカスタムドメインを利用したCORS設定の方法

Question

CORS設定のされたサイトを作成しており、APIGWのカスタムドメインなしの状態では問題なく動作する状態の物に、
APIGWのカスタムドメインを追加したところ、設定箇所が足りないのかCORSエラーが出るようになりました。

①クライアントがページにアクセスするとCloudFront経由でS3の静的コンテンツが表示
②トップページにあるボタンを押すことでJsファイルに記載していたAPIGWメソッドを呼び出すURLから対象のAPIがたたかれ、Cognito認証を行う（この時の各ホスト名はauthとし、ドメインはクライアントがアクセスするページと同じになっている）。
③認証が通ればトップページに戻る
④再度ボタンを押すとそのアクセストークンを持って、APIに関連付けられたLambdaがたたかれ、ログインしたユーザーのCognitoユーザープールIDなどがHelloとともに表示されるようなものを作成しています。

アドレスを入力している個所として、
APIGWのOPTIONSのヘッダーのマッピングとLambdaのAccess-Control-Allow-OriginにCloudFrontにも登録している代替ドメインを、S3に格納しているJsファイルに各Cognito認証等用？のhttps://auth.ドメイン名/oauth2/authorizeや/tokenなどを設定しています。
また、fetchでCognito認証を通すAPIメソッドのURLを記載しており、そこをAPIGWのカスタムドメインに変更してみている状態です。

※追記
現在、Cognitoの認証が通り、トップページに戻るところまでは問題なく動作しており、④の再度ボタンを押した際に表示されるはずのCognitoユーザープールIDなどの情報表示がされないという状態にあります。
ブラウザの開発者ツールでのエラーとしてCORS要求がブロックされている、関連するプリフライト要求に対する応答が失敗したなどの問題が出ているようです。

以下エラー文
Access to fetch at 'https://APIGWカスタムドメイン/' from origin 'https://CloudFrontの代替ドメイン（クライアントがアクセスするアドレス）' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not HTTP ok status.

GET https://APIGWカスタムドメイン/ net::ERR_FAILED

Uncaught (in promise) TypeError: Failed to Fetch

APIGWのカスタムドメインの扱い方がまだいまいちわかり切っておらず、調べながらいろいろ試していますがうまくいきません。
APIGWのカスタムドメインを利用したCORS設定の方法について現状を打破する方法が何かわかればお手伝いいただきたく思います。よろしくお願いいたします。

Riku_Kobayashi · Answer

S3のCORS設定はどのようになっていますでしょうか？  
以下のブログで紹介されているような観点で確認してみるとよいと思います。  
https://qiita.com/ritya/items/d19f9379bc96fb63ad34

カスタムドメインを設定した際にAPI GateWay側でマッピングを設定した後にcurlコマンドなどで正常にAPIを実行できるか確認してみてください。  
S3のjsスクリプトから実行しているAPIのパスなどが一致しているかも確認するとよいと思います。  
https://qiita.com/TAKAHASHI_AIRI/items/7532073ffe17c6ab6150#%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%A8api%E3%82%92%E3%83%9E%E3%83%83%E3%83%94%E3%83%B3%E3%82%B0  
https://dev.classmethod.jp/articles/api-gateway-with-custom-domain/#toc-api1

re:Post Agent · Answer

APIGatewayのカスタムドメインを使用する際のCORS設定について、以下の点を確認し、対応することで問題が解決する可能性があります：

1. APIGatewayのCORS設定：
   カスタムドメインを使用する場合でも、APIGatewayのリソースレベルでCORS設定が必要です。各リソースのOPTIONSメソッドで、以下のヘッダーが正しく設定されていることを確認してください：
   - Access-Control-Allow-Origin
   - Access-Control-Allow-Headers
   - Access-Control-Allow-Methods

2. カスタムドメインのOrigin設定：
   クライアントサイドのコード（Jsファイル）で、APIリクエストを送信する際のURLをカスタムドメインに更新したことは正しい対応です。同時に、APIGatewayのCORS設定の'Access-Control-Allow-Origin'ヘッダーにも、このカスタムドメインを含める必要があります。

3. Cognitoの設定：
   Cognito User PoolsのApp client設定で、カスタムドメインをCallback URLとSign out URLに追加してください。

4. Lambda関数の対応：
   Lambda関数内でレスポンスヘッダーを設定している場合、'Access-Control-Allow-Origin'ヘッダーの値をカスタムドメインに更新してください。

5. CloudFrontの設定：
   CloudFrontディストリビューションのBehaviors設定で、APIGatewayへのリクエストに対して適切なOrigin設定がされていることを確認してください。また、必要に応じてWhitelisted Headersを設定し、CORSヘッダーが正しく転送されるようにしてください。

6. ブラウザのコンソール確認：
   開発者ツールのコンソールでCORSエラーの詳細を確認し、具体的にどのヘッダーや設定が問題になっているかを特定してください。

これらの点を順に確認し、必要な修正を行うことで、APIGatewayのカスタムドメインを使用した際のCORS問題が解決できる可能性が高いです。特に、Origin設定の一貫性とヘッダーの正確な設定が重要です。  
**Sources**  
[Test CORS for an API Gateway API - Amazon API Gateway](https://docs.aws.amazon.com/apigateway/latest/developerguide/apigateway-test-cors.html)

APIGWカスタムドメインを利用したCORS設定の方法

回答を追加する

関連するコンテンツ