異なるオリジン間でリソースを共有またはアクセスする必要がある場合は、カスタム HTTP レスポンスヘッダーを設定できます。このトピックでは、ApsaraVideo VOD のリソースに対してオリジン間リソース共有を有効にする方法について説明します。
オリジン間リソース共有 (CORS) とは
オリジン間リソース共有 (CORS) は、Web ページが自身のオリジン (ドメイン、プロトコル、またはポート) とは異なるオリジンからリソースにアクセスできるようにする標準的なメカニズムです。これにより、オリジン間のデータ転送を安全に有効にできます。詳細については、「オリジン間リソース共有 (CORS)」をご参照ください。
Q：デフォルトで CDN で CORS が有効になっていない場合はどうなりますか。
デフォルトでは、CDN はオリジン間リソース共有 (CORS) を有効にしません。この設定がないと、ブラウザは同一オリジンポリシーを適用してクロスオリジンリクエストをブロックするため、他の Web サイトがお客様のリソースを読み込むことができなくなります。
CDN キャッシュに起因する断続的なクロスオリジンエラー
CDN ノードが初めてオリジンからコンテンツを取得する際、リクエストに Origin ヘッダーが含まれていない場合、OSS は Access-Control-Allow-Origin レスポンスヘッダーを返しません。CDN は、CORS ヘッダーを含まないこのレスポンスをキャッシュします (デフォルトのキャッシュ期間はキャッシュルールによって決まります)。
その後、Origin ヘッダーを含むクロスオリジンリクエストがこのキャッシュされたレスポンスにヒットすると、レスポンスに Access-Control-Allow-Origin ヘッダーが含まれていないため、ブラウザはクロスオリジンエラーを報告します。キャッシュヒットのランダム性により、同じリソースへのアクセスが異なるタイミングで断続的に失敗します。
解決策：カスタム HTTP レスポンスヘッダー > ドメイン名 にある キャッシュ設定 で Access-Control-Allow-Origin レスポンスヘッダーを追加します。設定後、更新とプリフェッチを使用して、CDN ノード上の CORS ヘッダーを含まない古いキャッシュ済みレスポンスを削除し、新しくキャッシュされたレスポンスに正しい CORS ヘッダーが含まれるようにします。
CDN がレスポンスをキャッシュすると、オリジンからコンテンツを取得して OSS の CORS 設定を確認しなくなります。したがって、OSS の CORS ルールのみに依存するのではなく、CDN レベルでレスポンスヘッダーを設定する必要があります。
オリジン間リソース共有を設定する理由
セキュリティ上の制限により、ブラウザは通常、同一オリジンポリシーに従います。これにより、異なるドメイン、サブドメイン、プロトコル、またはポートからのリソースの読み込みとアクセスが制限されます。たとえば、example.com は example.org 上のリソースにアクセスできません。オリジン間リソース共有 (CORS) を設定することで、CDN サーバー上で関連するレスポンスヘッダーを設定できます。リクエストに許可されたルールを満たすヘッダーが含まれている場合、サーバーは対応する HTTP レスポンスヘッダーを返し、クロスオリジンリソースの読み込みとアクセスが可能になります。
仕組み
オリジンサーバーで CORS を設定した場合
CDN で CORS を設定した場合
オリジン間リソース共有の有効化
ApsaraVideo VOD コンソールにログインします。
左側のナビゲーションウィンドウで、[設定管理]> [CDN設定]> [ドメイン名] を選択します。
ドメイン名 ページで、管理するドメイン名を見つけ、[設定] をクリックします。
ドメイン名の左側メニューで、キャッシュ設定 をクリックします。
カスタム HTTP レスポンスヘッダー タブをクリックします。
追加 をクリックして、カスタム HTTP レスポンスヘッダーを設定します。
許可するオリジンのパラメーターを設定し、OK をクリックします。
パラメーター
例
[実行内容]
追加
[応答ヘッダー]
Access-Control-Allow-Origin
[応答ヘッダー値]
*
説明値をアスタリスク (
*) に設定すると、任意のオリジンからのリクエストを許可できます。値がアスタリスク (
*) でない場合は、1 つ以上の IP アドレス、ドメイン名、またはその両方の組み合わせを指定できます。複数の値を区切るには、半角カンマ (,) を使用します。ヘッダー値が
*でない場合は、http://またはhttps://で始まる必要があります。ヘッダー値にポート番号を含めることができます。
ワイルドカードドメイン名がサポートされています。
[重複の許可]
[いいえ]
説明はい：重複ヘッダーを許可します。CDN POP はオリジンサーバーからのヘッダーを保持し、同じ名前の新しいヘッダーを追加します。
いいえ：重複ヘッダーを防止します。CDN POP はオリジンサーバーからのヘッダーを新しいヘッダーで上書きします。
このトピックでは、重複を許可しない例を使用します。実際の設定は、お客様の環境によって異なる場合があります。
重要[重複を許可] と [CORS] の設定は相互に排他的です。[重複を許可] を [はい] に設定すると、CORS 検証は無効になります。
[CORS]
有効
説明[CORS] は、[操作] が [追加] に設定され、[レスポンスヘッダー] が「Access-Control-Allow-Origin」である場合にのみ設定できます。
[CORS] は [無効] または [有効] に設定できます。デフォルト値は [無効] です。
[無効] の状態では、CDN ノードはユーザーのリクエストの Origin ヘッダーを検証せず、設定された「Access-Control-Allow-Origin」の値のみを返します。
[有効] の場合、CDN ノードは以下のルールに従ってユーザーリクエストのクロスオリジン検証を実行し、検証結果に基づいて「Access-Control-Allow-Origin」の値を返します。クロスオリジン検証ルール：
ワイルドカード一致：Access-Control-Allow-Origin ヘッダーの値が「*」に設定されている場合、ユーザーリクエストに
Originパラメーターが含まれているか、そのパラメーターの値が何であるかに関係なく、常にAccess-Control-Allow-Origin:*ヘッダーが返されます。完全一致：[ヘッダー値] は、半角カンマ (,) で区切られた 1 つ以上の特定のオリジンに設定されます。
リクエストの「Origin」ヘッダーの値が、設定された値のいずれかと完全に一致する場合、レスポンスには対応するクロスオリジンヘッダーが含まれます。
完全一致がない場合、CORS ヘッダーはレスポンスに含まれません。
ワイルドカードドメイン名の一致：Access-Control-Allow-Origin ヘッダーの値がワイルドカードドメイン名に設定されている場合、システムはリクエストヘッダーの Origin 値がワイルドカードドメイン名と一致するかどうかを検証します。
[有効] の場合、[ヘッダー値] のドメイン名にハイフン
-が含まれている場合は、値を設定する前にハイフンをエスケープする必要があります。-は%-としてエスケープします。 例:元のヘッダー値：
http://doc.aliyun-example.com。エスケープ後のヘッダー値：
http://doc.aliyun%-example.com。
許可されるメソッドのパラメーターを設定し、OK をクリックします。
パラメーター
例
[実行内容]
追加
[応答ヘッダー]
Access-Control-Allow-Methods
[応答ヘッダー値]
GET, POST, PUT
説明複数のメソッドを区切るには、半角カンマ (,) を使用します。
[重複の許可]
[いいえ]
説明はい：重複ヘッダーを許可します。CDN POP はオリジンサーバーからのヘッダーを保持し、同じ名前の新しいヘッダーを追加します。
いいえ：重複ヘッダーを防止します。CDN POP はオリジンサーバーからのヘッダーを新しいヘッダーで上書きします。
このトピックでは、重複を許可しない例を使用します。実際の設定は、お客様の環境によって異なる場合があります。
設定例
例1
オリジン間リソース共有のレスポンスヘッダー値が単一の値または複数の値 (複数の値は半角カンマ (,) で区切られます) に設定されている場合：
リクエストヘッダーの「Origin」パラメーターの値が、設定された値のいずれかと完全に一致する場合、サーバーは対応するクロスオリジンヘッダーを返します。
完全一致がない場合、CORS ヘッダーはレスポンスに含まれません。
ApsaraVideo VOD コンソールで、Access-Control-Allow-Origin を http://example.com,https://aliyundoc.com に設定します。
ユーザーリクエストの
Originヘッダーがhttp://example.comの場合、CDN の POP (Point of Presence) はAccess-Control-Allow-Origin: http://example.comを返します。ユーザーリクエストの
Originヘッダーがhttps://aliyundoc.comの場合、CDN ノードはAccess-Control-Allow-Origin: https://aliyundoc.comを返します。CDN ノードは、Origin ヘッダーに
http://aliyundoc.comが指定されたユーザーリクエストには応答しません (ユーザーリクエストは HTTP を使用しますが、CDN は HTTPS 用に設定されているため、プロトコルが一致しません)。リクエストの
Originヘッダーがhttp://aliyun.comの場合、CDN POP は CORS ヘッダーを返しません (ドメインの不一致)。
例2
Access-Control-Allow-Origin レスポンスヘッダーがワイルドカードドメイン名に設定されている場合、リクエストヘッダーの Origin 値がワイルドカードドメイン名と一致するかどうかが検証されます。
ApsaraVideo VOD コンソールで、Access-Control-Allow-Origin を http://*.aliyundoc.com に設定します。
ユーザーリクエストに Origin ヘッダー
http://demo.aliyundoc.comが含まれている場合、CDN POP はAccess-Control-Allow-Origin: http://demo.aliyundoc.comを返します。リクエストの Origin ヘッダーが
http://demo.example.comの場合、ドメイン名が一致しないため、CDN POP は CORS ヘッダーを返しません。リクエストでは HTTPS プロトコルが使用されていますが、CDN は HTTP プロトコルで設定されているため、CDN ノードは、Origin ヘッダー
https://demo.aliyundoc.comを含むユーザーからのリクエストに応答しません。
よくある質問
Web ブラウザ (Chrome/Edge) で .ts ファイルの CORS エラーにより再生が失敗するのはなぜですか。
新しいバージョンのブラウザでは、Media Source Extensions (MSE) を介して .ts セグメントを読み込む際に、厳格な CORS 検証が適用されます。CDN に Access-Control-Allow-Origin ヘッダーが正しく設定されていない場合、ブラウザはリクエストをブロックし、再生は失敗します。
さらに、Access-Control-Allow-Origin にワイルドカード値 * を設定していて、プレイヤーのリクエストに Cookie やセッション認証情報が含まれている場合、ブラウザはレスポンスを拒否します。この場合、値を * からフロントエンドプレイヤーの正確なドメイン名 (例： https://player.example.com) に変更してください。
一部のコンピューターでコンソールのプレビューが失敗したり、.ts ファイルのリクエストで CORS エラーが報告されたりするのはなぜですか。
アクセラレーションドメイン名に CORS ルールが追加されているか確認してください。[ドメイン名] ページで対象のドメインを選択し、カスタム HTTP レスポンスヘッダーに Access-Control-Allow-Origin が正しい値で含まれていることを確認してください。
Access-Control-Allow-Origin を変更した後、Android WebView では再生が失敗するのに、Web/iOS では機能するのはなぜですか。
Access-Control-Allow-Origin レスポンスヘッダーを変更した後、新しい CORS 設定を有効にするには、CDN キャッシュをパージし、Android デバイスの WebView キャッシュをクリアする必要があります。そうしないと、アプリは古いヘッダーを持つキャッシュされたレスポンスを使い続けます。
テスト環境または特定のドメインでエラー 4009 が返されるのはなぜですか。
Access-Control-Allow-Origin が、テストドメインを除外して本番ドメインのみを許可するように設定されているか確認してください。許可されたオリジンリストにテストドメインを追加してください。
Access-Control-Allow-Credentials が true に設定されている場合、Origin 値をワイルドカード * に設定してはいけません。代わりに、正確なオリジンドメイン (例： https://test.example.com) を設定してください。
WeChat ミニプログラムまたは WeChat 公式アカウントで再生が失敗するのはなぜですか。
直リンク防止が有効になっていない場合、Referer ホワイトリストを設定する必要はありません。ただし、それでも CORS のインターセプトが発生する場合は、CORS ルールを設定する必要があります。
WeChat 公式アカウント内でのアプリ内再生については、以下を確認してください。
再生ページが HTTPS で配信されていること。
ドメイン名が ICP 登録を完了していること。
SSL 証明書が有効であること。
M3U8 プレイリストのレスポンスは、正しい Content-Type ヘッダーとして
application/vnd.apple.mpegurlまたはapplication/x-mpegURLを返します。
オリジン間リソース共有 (CORS) を設定すると、直リンクのリスクが高まりますか。
いいえ。CORS と Referer ベースの直リンク防止は、異なるレイヤーで機能する 2 つの独立したセキュリティメカニズムです。CORS は、ブラウザが Web ページに異なるオリジンからのリソースをリクエストすることを許可するかどうかを制御するブラウザ側のポリシーです。Referer ベースの直リンク防止は、CDN 上のサーバー側のアクセス制御であり、許可されていないドメイン名がお客様のビデオリソースを使用するのを防ぎます。
CORS を設定しても、既存の Referer ブラックリストやホワイトリストがバイパスされたり、弱体化されたりすることはありません。Access-Control-Allow-Origin をワイルドカード * に設定した場合でも、Referer 値が許可されていないリクエストは、HTTP ステータスコード 403 で拒否されます。リソースが直リンクされるのを防ぐには、Referer ベースの直リンク防止を設定してください。詳細については、「Referer ベースの直リンク防止の設定」をご参照ください。