AEM AS A CLOUD SERVICEのGraphQL永続クエリでCORS エラーが発生する
この記事では、CDN レベルのキャッシュが関係する場合に、Adobe Experience Manager as a Cloud ServiceのGraphQL永続クエリ応答でCORS ヘッダーが欠落している問題を解決する方法について説明します。
説明 description
環境
- Adobe Experience Manager as a Cloud Service
- GraphQLの永続クエリ
- CDN キャッシュ
問題/症状
- GraphQLの永続クエリエンドポイントに対してクロスオリジンのリクエストを行うと、ブラウザーのCORS エラーが発生します。
- CDNからの応答に必要なCORS ヘッダーが不足している可能性があり、異なるオリジンからのリクエストが失敗する可能性があります。
Access-Control-Allow-Origin個のヘッダーが見つからないため、ブラウザーが応答をブロックし、ヘッドレスまたはSPA統合に影響を与えます。
原因
エンドポイントでDispatcher レベルのキャッシュが無効になっている場合でも、必要なCORS ヘッダーを含まないCDN キャッシュ応答。 キャッシュしないように明示的に指示されていない限り、CDNは必要なヘッダーなしでキャッシュされた応答を提供できます。
解決策 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 ヘッダーを返し、正常に処理されていることを確認します。