AEM SitesにEdge Delivery Services コンテンツを埋め込む際の断続的なCORS違反

この記事では、aem.live埋め込みアプローチを使用して、Adobe Experience Manager(AEM)Edge Delivery Services(EDS)リソースをAdobe Experience Manager(AEM) Sites ページに埋め込む際の断続的なCORS (Cross-Origin Resource Sharing)違反のトラブルシューティング方法について説明します。 これらの問題は、EDS サイトでホストされているJavaScript ファイル、API、およびその他のリソースのリクエストに影響を与える可能性があり、読み込み動作に一貫性がなくなります。 この問題を解決するには、CORS ヘッダーを検証し、キャッシュまたは伝播に関連する不整合を調査します。

説明 description

環境

  • Adobe Experience Manager(AEM) Sites (すべてのバージョン)
  • Edge Delivery Services(EDS)

問題/症状

  • CORS ポリシー違反により、リソース要求が断続的に失敗します。
  • ブラウザーコンソールエラーは、CORS関連のエラーを示します。
  • この問題はランダムに発生し、すべてのリクエストに影響するわけではありません。
  • JavaScript ファイルやAPIなどの埋め込みEDS リソースのリクエストは、予期せず失敗する可能性があります。

根本原因

要求された応答ヘッダーがリクエストごとに一貫して返されない場合、断続的なCORS違反が発生する可能性があります。 この動作は、設定の問題、キャッシュの不整合、CDNまたはエッジ配信レイヤー間の伝搬遅延が原因で発生する可能性があります。

解決策 resolution

問題を解決するには、次の手順に従います。

  1. JavaScript ファイルとAPI エンドポイントを含む、AEM Sites ページからアクセスされたすべてのリソースに対して、適切なAccess-Control-Allow-Origin ヘッダーを返すようにEDS サイトが設定されていることを確認します。 設定されたヘッダー値が、リクエストを行うオリジンと一致することを確認します。
  2. HTTP ヘッダーエディターの設定を確認し、ヘッダールールがすべての必要なパスとファイルタイプに一貫して適用されていることを確認します。 ヘッダー配信に一貫性がないルール、重複ルール、競合ルールをチェックします。
  3. 問題の再現中にHAR ファイルをキャプチャします。 ブラウザーの「ネットワーク」タブで「 ログを保持」を有効にし、失敗したリクエストを確認して、Access-Control-Allow-Origin ヘッダーが存在するか、リクエストのOrigin ヘッダーと一致するかどうかを判断します。 また、任意のOPTIONS プリフライト リクエストが失敗するか、予期しない応答を返すかを確認します。
  4. CORS ヘッダーが正しく設定されていて、断続的に欠落している場合は、CDNとエッジキャッシュの動作を調査します。 キャッシュバスティングパラメーターでテストするか、関連するキャッシュをパージして、古いキャッシュ応答や一貫性のないキャッシュ応答を除外します。
  5. 問題が解決しない場合は、HTTP Header Editor設定のスクリーンショットと一緒にHAR ファイルを収集し、Adobe サポートに提供して詳細な分析を行います。
  6. AEM SitesからEDS リソースへのリクエストが一貫して成功し、ブラウザーコンソールにCORS エラーが表示されないことを確認して、解決策を確認します。
recommendation-more-help
experience-cloud-kcs-help-kbarticles