ApsaraVideo VOD:クロスオリジンアクセスの設定

エラーメッセージ

次のようなエラーが表示される場合があります。

No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:9030' is therefore not allowed access.

解決策

シナリオ 1：ApsaraVideo VOD の高速化ドメイン

動画が ApsaraVideo VOD でホストされており、CDN 高速化ドメインを使用している場合は、クロスオリジンリクエストを許可する HTTP レスポンスヘッダーを追加してください。

1. ApsaraVideo VOD コンソールにログインします。

2. 左側のナビゲーションペインで、設定の管理 配下の 配信の高速化設定 > ドメイン名 を選択します。

3. 設定するドメイン名を見つけ、[設定] をクリックします。

4. 左側のナビゲーションペインで、キャッシュ をクリックします。カスタム HTTP レスポンスヘッダー タブで、追加 をクリックします。

5. レスポンスヘッダーとして Access-Control-Allow-Origin を選択します。

   [レスポンスヘッダーアクション] を [追加] に、[レスポンスヘッダー値] を * に設定します。[重複を許可] で [許可しない] を選択します。[クロスオリジン検証] が無効になっていることを確認して、[OK] をクリックします。

6. Enter the response header value and click [決定].

   説明

   • Set the value to * to allow requests from any origin.

   • If the value is not *, specify one or more IP addresses or domain names, separated by commas (,).

   • If the value is not *, it must include the http:// or https:// prefix.

   • Port numbers are supported in the value.

   • Wildcard domain names are supported.

7. **[追加]** をクリックして、Access-Control-Allow-Methods を選択し、その値を POST または GET に設定します。複数のメソッドを指定する場合は、カンマ (,) で区切ってください。

シナリオ 2：OSS のカスタムドメイン

プレーヤーから直接 OSS リソースにアクセスするには、バケットで CORS を有効にしてください。詳細な手順については、「クロスオリジンリソース共有の設定」をご参照ください。

次の設定で CORS ルールを作成してください。

• [オリジン]： *

• [許可されたメソッド]： GET、POST、PUT、DELETE、HEAD を選択してください。

• [許可されたヘッダー]： *

• [公開されたヘッダー]： ETag

[最大有効期間 (秒)] を 0 に設定して、[Vary: Origin を返す] はチェックを外したままにします。

設定の検証

CORS 設定を検証します。

1. ブラウザの開発者ツール (F12) を開きます。

2. [ネットワーク] タブに移動します。

3. クロスオリジンリクエストを行うページにアクセスします。

4. ネットワークリクエストリストで動画リクエストを見つけてクリックします。

5. [レスポンスヘッダー] セクションを確認して、Access-Control-Allow-Origin ヘッダーが期待される値で存在することを確認します。

Access-Control-Allow-Origin ヘッダーが正しい値で表示されている場合、CORS が正しく設定されています。