AEM as a Cloud ServiceのGraphQL永続クエリで欠落しているCORS ヘッダーを修正する
この記事では、CDN キャッシュが干渉する場合に、Adobe Experience Manager as a Cloud ServiceのGraphQL永続クエリ応答で欠落しているCORS ヘッダーを解決する方法について説明します。 このソリューションには、CDN キャッシュを防ぎ、CORS ヘッダーが存在することを確認するために、キャッシュ制御ヘッダーを更新することが含まれます。
説明 description
環境
- Adobe Experience Manager as a Cloud Serviceの公開またはプレビュー
- GraphQL persisted-query エンドポイント：
/graphql/execute.json/* - Adobeで管理されているCDNを介したクロスオリジンのブラウザーアクセス
問題/症状
- クロスオリジン アプリケーションがGraphQLの永続クエリをリクエストすると、ブラウザーからCORS エラーが報告されます。
- リクエストには
Originヘッダーが含まれていますが、CDN応答には必要なAccess-Control-Allow-Originヘッダーが含まれていません。 - 異なるオリジンからの繰り返しリクエストは、必要なCORS ヘッダーなしでキャッシュされた応答を受け取ります。 応答ヘッダーには、キャッシュ
HITとゼロ以外のAgeが表示されます。 - 永続クエリエンドポイントのDispatcher キャッシュは無効になっていますが、Adobeで管理されるCDNはキャッシュされた応答を提供します。
- OSGi CORS ポリシーはAEMで設定されますが、パブリッシュ応答にはCORS ヘッダーがありません。
原因
Adobeで管理されているCDNは、Access-Control-Allow-OriginなしでGraphQLの永続クエリ応答をキャッシュし、同じURLに対する後のリクエストに対して、そのキャッシュされた応答を提供しました。 Dispatcher キャッシュを無効にしても、Adobe CDN キャッシュは無効になりません。 パブリッシュとプレビューの場合は、Dispatcher vhostでCORSを設定します。パブリッシュおよびプレビューサービスでは、この設定にOSGi CORS ポリシーは使用されません。
解決策 resolution
問題を解決するには、次の手順に従います。
-
Dispatcher設定を確認し、GraphQL永続クエリエンドポイント
/graphql/execute.json/*に対してキャッシュが有効になっていないことを確認します。 この動作を制御する設定変数は、通常CACHE_GRAPHQL_PERSISTED_QUERIESです。 変数が未定義であるか、このパスのキャッシュを防ぐように設定されていることを確認します。 -
Dispatcher vhost設定を更新して
mod_headersを使用し、GraphQL永続クエリエンドポイントのCache-Controlヘッダーをprivate, no-store, no-cache, must-revalidate, max-age=0に設定します。code language-none Header set Cache-Control “private, no-store, no-cache, must-revalidate, max-age=0” -
設定の変更を適用し、Dispatcher サービスをリロードまたは再起動します。
-
Originヘッダーを含むリクエストを送信して、GraphQL永続クエリエンドポイントをテストします。 -
応答に、想定される
Access-Control-Allow-Originヘッダーが含まれていることを確認します。 -
x-cache応答ヘッダーがHITではなくMISSを返していることを確認し、CDN キャッシュから応答が提供されていないことを確認します。 -
AEM CORS ポリシー設定を確認し、
com.adobe.granite.cors.impl.CORSPolicyImplがエンドポイントに必要なオリジンを許可するように設定されていることを確認します。 -
CDNが必要なCORS ヘッダーを含まない応答を既にキャッシュしている場合は、後続のリクエストが正しいヘッダーを受信するように、影響を受けるエンドポイントのキャッシュをパージまたは無効化します。
-
GraphQL永続クエリエンドポイントへのリクエストが、想定されるCORS ヘッダーを返し、正常に処理されていることを確認します。