:CORS の設定

CORSとは何ですか?

クロスオリジンリソース共有 (CORS) は、webページが異なるオリジンサーバーからリソースにアクセスしてロードできるようにするために、HTML5によって提供される標準のクロスオリジンソリューションです。 これにより、データ伝送のセキュリティが確保される。 詳細については、「クロスオリジンリソース共有 (CORS) 」をご参照ください。

メリット

セキュリティ上の目的で、ブラウザは同一オリジンポリシーを使用します。 これにより、スクリプトが異なるドメインまたはサブドメインから、または異なるプロトコルまたはポートを介してリソースにアクセスしてロードする要求を開始することが制限されます。 たとえば、example.comはn example.orgのリソースにアクセスできません。 CORSを設定するときに、ポイントオブプレゼンス (POP) がクライアントに返す応答ヘッダーを指定できます。 このようにして、要求が許可されたヘッダーに含まれるヘッダーを運ぶ場合、対応するHTTP応答ヘッダーが返され、要求されたリソースにアクセスして、異なるオリジンからでもロードできます。

CORSの仕組み

CORSが有効になっていません

1. クライアントは http://example.com/index.html o example.comの要求を送信します。 example.comはindex.htmlファイルをクライアントに返し、index.htmlファイルのスクリプトが http://example.org/api. の要求を開始します。

2. クライアントは、オリジn:example.comヘッダーt o example.orgを含む要求を送信します。 CORSが有効になっていないため、デフォルトではPOPはクロスオリジンヘッダーを返しません。 クロスオリジンの制限により、ブラウザはこのリクエストへの応答をブロックし、「リクエストされたリソースに「アクセス制御-許可-発信元」ヘッダーが存在しません」というエラーが表示されます。

CORS対応

1. クライアントは http://example.com/index.html o example.comの要求を送信します。 example.comはindex.htmlファイルをクライアントに返し、index.htmlファイルのスクリプトが http://example.org/api. の要求を開始します。

2. クライアントは、オリジn:example.comヘッダーt o example.orgを含む要求を送信します。 CORSを有効にすると、POPはリクエストのOriginヘッダーの値がAccess-Control-Allow-Originヘッダーの値と一致するかどうかを確認します。 1つ以上の値の完全一致とワイルドカードドメイン名の一致がサポートされています。 値が一致すると、アクセス制御-許可-オリジン: http://example.com などのクロスオリジンヘッダーが返されます。

3. クライアントがレスポンスを受信した後、クロスオリジンレスポンスヘッダーの値がCORSポリシーに準拠している http://example.com の場合、結果が表示されます。

CORSの有効化

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

2. 左側のナビゲーションウィンドウで、[設定管理]> [CDN設定]> [ドメイン名] を選択します。

3. [ドメイン名] ページで、管理するドメイン名を探し、[設定する] をクリックします。

4. 左側のナビゲーションツリーで、キャッシュ設定 をクリックします。

5. [カスタムHTTPレスポンスヘッダー] タブをクリックします。

6. [追加] をクリックします。 表示されるダイアログボックスで、パラメーターを指定します。

7. 操作を追加に設定し、応答ヘッダーをアクセス制御-許可-オリジンに設定し、重複を許可しません。 次に、CORSを有効にし、OK をクリックします。 次の図は、サンプル設定を示しています。

   

   パラメーター	例
   実行内容	追加
   応答ヘッダー	アクセス制御-許可-オリジン
   応答ヘッダー値	* 説明 このヘッダーをアスタリスク (*) に設定すると、すべてのオリジンに一致します。 このヘッダーがアスタリスク (*) に設定されていない場合は、1つ以上のIPアドレス、ドメイン名、またはIPアドレスとドメイン名の組み合わせを設定できます。 複数入力する場合は、カンマ (,) で区切ります。 ヘッダー値をワイルドカード文字 (*) 以外の値に設定した場合、値はhttp:// またはhttps:// で始まる必要があります。 ポート番号がサポートされています。 ワイルドカードドメイン名がサポートされています。
   重複の許可	いいえ 説明 はい: ヘッダーの重複が許可されています。 オリジンサーバーから返されたヘッダーと、レスポンスに追加されたヘッダーがクライアントに返されます。 いいえ: ヘッダーの重複は許可されていません。 オリジンサーバーから返されたヘッダーは、レスポンスに追加されたヘッダーによって上書きされます。 この例では、値Not Allowedが使用されます。 このパラメーターは、ビジネス要件に基づいて設定できます。 重要 重複の許可 と CORS の設定は相互に排他的です。 重複の許可 を はい に設定すると、CORSは無効になります。
   CORS	有効 説明 実行内容 を 追加 に設定し、応答ヘッダー を [アクセス制御-許可-オリジン] に設定した場合にのみ、CORSパラメーターを設定できます。 CORSの有効な値: しないおよび有効。 デフォルト値: しない。 しない: POPはユーザーリクエストのOriginヘッダーをチェックしません。 この場合、POPはAccess-Control-Allow-Originの設定値を返します。 有効: POPはユーザーリクエストのOriginヘッダーをチェックし、次のルールに基づいてAccess-Control-Allow-Originヘッダーの値を指定し 。 ワイルドカードパターンマッチ: Access-Control-Allow-Originヘッダーをアスタリスク (*) に設定した場合、ユーザーリクエストにOriginヘッダーまたはOriginヘッダーに指定された値が含まれているかどうかに関係なく、Access-Control-Allow-Origin:* が返されます。応答ヘッダー 完全一致: Access-Control-Allow-Originヘッダーに1つ以上の値を指定できます。 複数の値はコンマ (,) で区切ります。応答ヘッダー ユーザーリクエストのOriginヘッダーの値がAccess-Control-Allow-Originヘッダーの値と一致する場合、一致したAccess-Control-Allow-Originヘッダーの値が返されます。 ユーザーリクエストのOriginヘッダーの値がAccess-Control-Allow-Originヘッダーの値と一致しない場合、Access-Control-Allow-Originヘッダーは返されません。 ワイルドカードドメイン名の一致: Access-Control-Allow-Originヘッダーをワイルドカードドメイン名に設定すると、Originヘッダーの値がワイルドカードドメイン名と一致します。応答ヘッダー CORSパラメーターを有効に設定し、応答ヘッダー値パラメーターに指定する値にハイフン (-) が含まれている場合は、ハイフン (-) を %- にエスケープする必要があります。 例： 元の応答ヘッダー値: http://doc.aliyun-example.com エスケープされたレスポンスヘッダー値: http:// doc.aliyu n%-example.com

8. 操作を追加に設定し、応答ヘッダーをアクセス制御-許可-メソッドに設定し、重複を許可しません。 次に、OK をクリックします。 次の図は、サンプル設定を示しています。

   

   パラメーター	例
   実行内容	追加
   応答ヘッダー	アクセス制御-許可-メソッド
   応答ヘッダー値	GET、POST、またはPUT 説明 GET、POST、PUTを同時に追加する場合は、コンマ (,) で区切ります。
   重複の許可	いいえ 説明 はい: ヘッダーの重複が許可されています。 オリジンサーバーから返されたヘッダーと、レスポンスに追加されたヘッダーがクライアントに返されます。 いいえ: ヘッダーの重複は許可されていません。 オリジンサーバーから返されたヘッダーは、レスポンスに追加されたヘッダーによって上書きされます。 この例では、値Not Allowedが使用されます。 このパラメーターは、ビジネス要件に基づいて設定できます。

例

例 1

Access-Control-Allow-Originヘッダーをコンマ (,) で区切られた1つ以上の値に設定した場合:

• ユーザーリクエストのOriginヘッダーの値がAccess-Control-Allow-Originヘッダーの値と一致する場合、一致したAccess-Control-Allow-Originヘッダーの値が返されます。

• ユーザーリクエストのOriginヘッダーの値がAccess-Control-Allow-Originヘッダーの値と一致しない場合、Access-Control-Allow-Originヘッダーは返されません。

ApsaraVideo VODコンソールで、Access-Control-Allow-Origin:http://example.com を https://aliyundoc.com 指定します。

• ユーザーリクエストのOriginヘッダーの値が http://example.com の場合、POPはAccess-Control-Allow-Origin:http://example.com を返します。

• ユーザーリクエストのOriginヘッダーの値が https://aliyundoc.com の場合、POPはAccess-Control-Allow-Origin:https://aliyundoc.com を返します。

• ユーザーリクエストのOriginヘッダーの値が http://aliyun.com の場合、ドメイン名が一致しないため、POPはAccess-Control-Allow-Originを返しません。

• ユーザーリクエストのOriginヘッダーの値が http://aliyundoc.com の場合、リクエストはHTTPを使用し、POPはHTTPSリクエストに応答するため、POPはAccess-Control-Allow-Originを返しません。

例 2

Access-Control-Allow-Originヘッダーをワイルドカードドメイン名に設定した場合、CDN POPはユーザーリクエストのOriginヘッダーの値がワイルドカードドメイン名と一致するかどうかを確認します。

ApsaraVideo VODコンソールでAccess-Control-Allow-Origin:http:// * .aliyundoc.comを指定します。

• ユーザーリクエストのOriginヘッダーの値が http://demo.aliyundoc.com の場合、POPはAccess-Control-Allow-Origin:http://demo.aliyundoc.com を返します。

• ユーザーリクエストのOriginヘッダーの値が http://demo.example.com の場合、ドメイン名が一致しないため、POPはAccess-Control-Allow-Originを返しません。

• ユーザーリクエストのOriginヘッダーの値が https://demo.aliyundoc.com の場合、リクエストはHTTPSを使用し、POPはHTTPリクエストにのみ応答するため、POPはAccess-Control-Allow-Originを返しません。