Marketing Cloud Personalization | CORS エラーの原因と解消方法

CORS エラーが発生する箇所は、大きく分けて以下の 2 つのパターンがあります。

1. SDK の読み込み時: ブラウザが SDK ファイル (evergage.min.js) を取得する段階でブロックされる

2. イベント送信 (API リクエスト) 時: SDK の読み込みは成功しているが、データの送受信段階でブロックされる

それぞれの原因と解消方法は以下の通りです。

1. SDK 読み込み時にエラーが出る場合

JavaScript の fetch() や XMLHttpRequest を使用して、直接 Personalization の CDN から SDK ファイル (evergage.min.js) を取得する場合に、ブラウザがレスポンスの読み取りをブロックします。

原因: Personalization の CDN サーバは、スクリプトファイルに対する fetch リクエストを想定した設計になっておらず、許可を示すヘッダー (Access-Control-Allow-Origin など) を返さないためです。

解消方法: 原則として、標準的な <script> タグ を使用して SDK を読み込んでください 。プログラムによって動的に挿入する場合は、 document.createElement('script') を使用し、 src 属性に SDK の URL を指定して DOM に追加してください 。

特殊なケース (CMS の制約など): 利用している CMS の仕様により fetch による取得が強制される場合は、自社で CORS ヘッダーを付与する Proxy サーバ を構築し、そこを経由して SDK を読み込む方法を検討ください。 ※この構成は標準外となるため、自社のエンジニアによる実装・保守が必要です。

2. イベント送信 (API リクエスト) 時にエラーが出る場合

SDK の読み込みは成功しているものの、特定の操作をした際に Personalization のエンドポイントへのリクエストが CORS エラーで失敗することがあります。

原因: 多くの場合、通信そのもののエラーではなく、 Sitemap の定義不備 (必須項目の漏れや属性の型不正) が原因です。サーバ側がリクエストを不正と判断してエラー応答を返した際、その応答に CORS 許可ヘッダーが含まれないために、ブラウザ側で CORS 違反として表示されます。

解消方法: 開発者ツール (Network タブ) で失敗したリクエストを選択し、送信内容 (URL に含まれるパラメータを Base64 デコードする等の方法で確認可能) が Personalization 側の要件を満たすよう Sitemap を修正してください。

解決しない場合 (サポートへの問い合わせ)

上記を確認しても解消しない場合は、以下の情報を添えてサポートへお問い合わせください。

共通: エラーが発生しているページの URL 、ブラウザのコンソールログのスクリーンショット。

イベント送信時のエラーの場合: 開発者ツール (Network タブ) で確認できる、対象リクエストの Payload (JSON) の内容。