CDN: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 の場合、結果が表示されます。

使用上の注意

• オリジンサーバーがOSS (Object Storage Service) バケットで、CORSがOSSコンソールとAlibaba Cloud CDN コンソールの両方で設定されている場合、Alibaba Cloud CDN のCORS設定が使用されます。 詳細については、「CORS」をご参照ください。

• オリジンサーバーがオンプレミスサーバーまたはECSインスタンスの場合、動的コンテンツと静的コンテンツを区別することを推奨します。 これにより、静的コンテンツの配信がAlibaba Cloud CDN によって高速化されます。 Alibaba Cloud CDN のCORS設定は、静的リソースに対してのみ有効になります。

CORSの有効化

1. Alibaba Cloud CDNコンソール

2. 左側のナビゲーションウィンドウで、ドメイン名.

3. [ドメイン名] ページで、管理するドメイン名を見つけて、アクション 列の 管理 をクリックします。

4. ドメイン名の左側のナビゲーションツリーで、キャッシュ設定.

5. をクリックし、ノード HTTP レスポンスヘッダータブをクリックします。

6. クリック追加.

7. 次の表に従ってパラメーターを設定し、OK.

   

   パラメーター	例
   実行内容	追加
   応答ヘッダー	アクセス制御-許可-オリジン
   応答ヘッダー値	* 説明 このヘッダーをアスタリスク (*) に設定すると、すべてのオリジンに一致します。 このヘッダーがアスタリスク (*) に設定されていない場合は、1つ以上のIPアドレス、ドメイン名、またはIPアドレスとドメイン名の組み合わせを設定できます。 複数入力する場合は、カンマ (,) で区切ります。 ヘッダー値をワイルドカード文字 (*) 以外の値に設定した場合、値はhttp:// またはhttps:// で始まる必要があります。 ポート番号がサポートされています。 ワイルドカードドメイン名がサポートされています。
   重複の許可	いいえ 説明 はい: ヘッダーの重複が許可されています。 オリジンサーバーから返されたヘッダーと、レスポンスに追加されたヘッダーがクライアントに返されます。 いいえ: ヘッダーの重複は許可されていません。 オリジンサーバーから返されたヘッダーは、レスポンスに追加されたヘッダーによって上書きされます。 重要 重複の許可 と 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を同時に追加する場合は、コンマ (,) で区切ります。
   重複の許可	いいえ 説明 はい: ヘッダーの重複が許可されています。 オリジンサーバーから返されたヘッダーと、レスポンスに追加されたヘッダーがクライアントに返されます。 いいえ: ヘッダーの重複は許可されていません。 オリジンサーバーから返されたヘッダーは、レスポンスに追加されたヘッダーによって上書きされます。 この例では、値Noが使用されます。 このパラメーターは、ビジネス要件に基づいて設定できます。

例

FAQ

レスポンスヘッダーを設定しても、CORSの問題が報告され、Access-Control-Allow-Originレスポンスヘッダーが返されないのはなぜですか。