クロスオリジンリソース共有（CORS）について

Adobe Experience Manager のクロスオリジンリソース共有（CORS）を使用すると、AEM 以外の web プロパティを使用して、認証済みおよび未認証の両方で AEM へのクライアントサイド呼び出しを行い、コンテンツを取得したり、AEM と直接やり取りしたりできます。

このドキュメントで説明している OSGi 設定は、次の場合に十分です。

AEM パブリッシュでのマルチオリジン CORS アクセスが必要な場合は、このドキュメントを参照してください。

Adobe Granite クロスオリジンリソース共有ポリシー OSGi 設定

CORS 設定は、AEM で OSGi 設定ファクトリとして管理され、各ポリシーはファクトリの 1 つのインスタンスとして表されます。

Adobe Granite Cross-Origin Resource Sharing Policy（com.adobe.granite.cors.impl.CORSPolicyImpl）

ポリシーの選択

ポリシーは、

これらの値に一致する最初のポリシーが使用されます。 何も見つからない場合、CORS リクエストが却下されます。

ポリシーがまったく設定されていない場合、サーバーの他のモジュールが CORS に応答しない限り、ハンドラーが無効になり、事実上拒否されるため、CORS リクエストも応答されません。

Policy プロパティ

許可された接触チャネル

許可されたオリジン（正規表現）

許可されているパス

公開済みのヘッダー

最大経過年数

サポートされるヘッダー

許可されるメソッド

資格情報をサポート

設定例

サイト 1 は、コンテンツが GET を介して消費される、匿名でアクセス可能な読み取り専用の基本的なシナリオです。

{
  "supportscredentials":false,
  "exposedheaders":[
    ""
  ],
  "supportedmethods":[
    "GET",
    "HEAD"
  ],
  "alloworigin":[
    "http://127.0.0.1:3000",
    "https://site1.com"

  ],
  "maxage:Integer": 1800,
  "alloworiginregexp":[
    "http://localhost:.*"
    "https://.*\.site1\.com"
  ],
  "allowedpaths":[
    "/content/_cq_graphql/site1/endpoint.json",
    "/graphql/execute.json.*",
    "/content/site1/.*"
  ],
  "supportedheaders":[
    "Origin",
    "Accept",
    "X-Requested-With",
    "Content-Type",
    "Access-Control-Request-Method",
    "Access-Control-Request-Headers"
  ]
}

サイト 2 はより複雑で、承認および変更（POST、PUT、DELETE）リクエストが必要です。

{
  "supportscredentials":true,
  "exposedheaders":[
    ""
  ],
  "supportedmethods":[
    "GET",
    "HEAD"
    "POST",
    "DELETE",
    "PUT"
  ],
  "alloworigin":[
    "http://127.0.0.1:3000",
    "https://site2.com"

  ],
  "maxage:Integer": 1800,
  "alloworiginregexp":[
    "http://localhost:.*"
    "https://.*\.site2\.com"
  ],
  "allowedpaths":[
    "/content/site2/.*",
    "/libs/granite/csrf/token.json",
  ],
  "supportedheaders":[
    "Origin",
    "Accept",
    "X-Requested-With",
    "Content-Type",
    "Access-Control-Request-Method",
    "Access-Control-Request-Headers",
    "Authorization",
    "CSRF-Token"
  ]
}

Dispatcher のキャッシュに関する懸念と設定 dispatcher-caching-concerns-and-configuration

Dispatcher 4.1.1 以降の応答ヘッダーはキャッシュ可能です。 これにより、リクエストが匿名である限り、CORS でリクエストされたリソースとともに CORS ヘッダーをキャッシュできます。

一般に、Dispatcher でのコンテンツのキャッシュに関する考慮事項と同じ点を、Dispatcher での CORS 応答ヘッダーのキャッシュに適用できます。 次の表は、CORS ヘッダー（CORS リクエスト）をキャッシュできるタイミングを定義します。

CORS リクエストヘッダーの許可

必要な HTTP リクエストヘッダーを AEM に通過して処理できるようにするには、Disaptcher の /clientheaders 設定でこれらのヘッダーを許可する必要があります。

/clientheaders {
   ...
   "Origin"
   "Access-Control-Request-Method"
   "Access-Control-Request-Headers"
}

CORS 応答ヘッダーのキャッシュ

キャッシュされたコンテンツの CORS ヘッダーをキャッシュし提供できるようにするには、AEM パブリッシュの dispatcher.any ファイルに次の /cache /headers configuration を追加します。

/publishfarm {
    ...
    /cache {
        ...
        # CORS HTTP response headers
        # https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#the_http_response_headers
        /headers {
            ...
            "Access-Control-Allow-Origin"
            "Access-Control-Expose-Headers"
            "Access-Control-Max-Age"
            "Access-Control-Allow-Credentials"
            "Access-Control-Allow-Methods"
            "Access-Control-Allow-Headers"
        }
    ...
    }
...
}

dispatcher.any ファイルを変更をしたら、web サーバーアプリケーションを必ず再起動します。

/cache/headers 設定の更新後、次のリクエストでヘッダーが適切にキャッシュされるように、キャッシュの完全なクリアが必要になる可能性があります。

CORS のトラブルシューティング

ログは com.adobe.granite.cors で利用できます。

ヒント：

サポート資料