Web プレーヤーで FLV または M3U8 ビデオを再生する際に Access-Control-Allow-Origin エラーが発生した場合は、再生ドメイン名に対してオリジン間リソース共有 (CORS) を有効にする必要があります。
エラーメッセージ
次のエラーメッセージが表示されます：
No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Origin ‘http://localhost:9030‘ is therefore not allowed access.ソリューション
ApsaraVideo VOD の高速化ドメイン名
リソースが ApsaraVideo VOD にあり、高速化ドメイン名を設定している場合は、ドメイン名に HTTP 応答ヘッダーを追加して、オリジン間アクセスを許可する必要があります。
ApsaraVideo VOD コンソールにログインします。
左側のナビゲーションウィンドウで、を選択します。
[ドメイン名] ページで、設定するドメイン名を選択し、[操作] 列の [設定] をクリックします。
左側のナビゲーションウィンドウで [キャッシュ設定] をクリックします。[カスタム HTTP 応答ヘッダー] タブで、[追加] をクリックします。
応答ヘッダーを Access-Control-Allow-Origin に設定して、クロスオリジンリクエストで許可するオリジンを指定します。
応答ヘッダーの値を入力し、[OK] をクリックします。
説明応答ヘッダーの値にはアスタリスク (*) を使用でき、これにより任意のオリジンからのリクエストが許可されます。
値がアスタリスク (*) でない場合は、1 つ以上の IP アドレス、ドメイン名、またはその両方の組み合わせを指定できます。コンマ (,) で区切ります。
値がアスタリスク (*) でない場合は、値に http:// または https:// プロトコルを含める必要があります。
値にはポート番号を含めることができます。
値にはワイルドカードドメイン名を使用できます。
ドメインに許可されたメソッドを追加します。[応答ヘッダーの値] を POST または GET に設定します。POST と GET の両方を指定するには、コンマ (,) で区切ります。次の図に例を示します。
TS セグメントの URL 内のドメイン名が M3U8 URL 内のドメイン名と異なる場合は、TS セグメントのドメイン名にもオリジン間アクセス用の HTTP 応答ヘッダーを追加する必要があります。
OSS のカスタムドメイン名
プレーヤーから直接 OSS にアクセスする場合は、バケットに対して CORS を有効にする必要があります。詳細については、「CORS」をご参照ください。
次のパラメーターで CORS ルールを作成します。
オリジン：*。
許可されたメソッド： GET、POST、PUT、DELETE、HEAD を選択します。
許可されたヘッダー：*。
公開ヘッダー：ETag。
これは最初の CORS ルールである必要があります。
次の図に例を示します。
設定の確認
オリジン間設定が有効であることを確認するには、次の手順に従います：
ブラウザで開発者ツールを開きます。通常、F12 キーを押すか、ページを右クリックして [検証] を選択することで開くことができます。
[ネットワーク] タブに切り替えます。
クロスオリジンリクエストを含むページを開きます。
ネットワークリクエストのリストで、ビデオのリクエストを見つけてクリックし、詳細を表示します。
リクエストの詳細で、[応答ヘッダー] セクションを確認します。セクションに
Access-Control-Allow-Originヘッダーが含まれており、その値が設定と一致することを確認します。
Access-Control-Allow-Origin 応答ヘッダーが存在し、その値が正しい場合、オリジン間設定は有効です。