CDN:CORS を構成する

CORS とは

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

メリット

セキュリティ上の理由から、ブラウザは同一オリジンポリシーを使用します。 これにより、Web ページが異なるドメインまたはサブドメインから、あるいは異なるプロトコルまたはポートを介してリソースにアクセスしてロードするためのリクエストを開始することが制限されます。 たとえば、example.com は example.org 上のリソースにアクセスできません。 CORS を構成すると、CDN サーバーで応答ヘッダーを指定できます。 CDN リソースへのアクセス要求が許可されたルールに準拠したヘッダーを保持している場合、クロスオリジンリソースをロードしてアクセスできます。

CORS のしくみ

使用上の注意

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

• オリジンサーバーがオンプレミスサーバーまたは Elastic Compute Service (ECS) インスタンスである場合、動的コンテンツと静的コンテンツを分離することをお勧めします。 こうすることで、CDN によって静的コンテンツの配信が高速化されます。 CDN コンソールの CORS 設定は、静的リソースに対してのみ有効です。

CORS を有効にする

1. Alibaba Cloud CDN コンソールにログインします。

2. 左側のナビゲーションウィンドウで、ドメイン名 をクリックします。

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

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

5. [発信リクエストヘッダーの変更] タブをクリックします。

6. HTTP 応答ヘッダーを構成するには、追加 をクリックします。

7. クロスオリジンリクエストで許可されるオリジンを指定するパラメータを構成し、OK をクリックします。

   

   次の表にパラメータを示します。

   パラメータ	説明	例
   実行内容	CORS 機能を使用するには、このパラメータを 追加 に設定する必要があります。	追加
   応答ヘッダー	CORS 機能を使用するには、このパラメータを Access-Control-Allow-Origin に設定する必要があります。	Access-Control-Allow-Origin
   応答ヘッダー値	CORS 無効: ワイルドカードまたは単一の指定オリジンのみ構成できます。 ワイルドカード (*): ワイルドカードが構成されており、すべてのリソースにアクセスできることを示します。 単一の指定オリジン: 単一のオリジン (ドメイン名) が指定されており、指定されたオリジンからのみリソースにアクセスできることを示します。 CORS 有効: ワイルドカード、単一の指定オリジン、複数の指定オリジン、およびワイルドカードドメイン名を構成できます。 ワイルドカード (*): ワイルドカードが構成されており、すべてのリソースにアクセスできることを示します。 単一の指定オリジン: 単一のオリジン (ドメイン名) が指定されており、指定されたオリジンからのみリソースにアクセスできることを示します。 複数の指定オリジン: 複数のオリジン (ドメイン名) が指定され、コンマ (,) で区切られています。指定された範囲内のオリジンからリソースにアクセスできることを示します。 ワイルドカードドメイン名: ワイルドカードドメイン名が構成されており、指定されたワイルドカードドメイン名に一致するすべてのオリジンからリソースにアクセスできることを示します。	* http://www.aliyun.com https://aliyun.com,http://www.aliyun.com http://*.aliyun.com
   重複の許可	[はい]: 重複ヘッダーが許可されます。 オリジンサーバーから返されたヘッダーと、応答に追加されたヘッダーがクライアントに返されます。 [いいえ]: 重複ヘッダーは許可されません。 オリジンサーバーから返されたヘッダーは、応答に追加されたヘッダーによって上書きされます。 重要 [重複を許可] 設定と [CORS] 設定は相互に排他的です。 [重複を許可] を [はい] に設定すると、[CORS] の設定は無効になります。	いいえ
   CORS	CORS パラメータは、実行内容 を 追加 に、応答ヘッダー を Access-Control-Allow-Origin に設定した場合にのみ構成できます。 CORS の有効な値: しない および 有効 。 デフォルト値: しない 。 しない : CDN POP は、ユーザーリクエストの Origin ヘッダーを確認しません。 この場合、POP は構成された Access-Control-Allow-Origin の値を返します。 有効 : CDN POP は、ユーザーリクエストの Origin ヘッダーを確認し、次のルールに基づいて Access-Control-Allow-Origin ヘッダーの値を指定します。 ワイルドカードパターンマッチ: Access-Control-Allow-Origin ヘッダーをアスタリスク (*) に設定した場合、ユーザーリクエストに Origin ヘッダーが含まれているかどうかに関係なく、Access-Control-Allow-Origin:* が返されます。または 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.aliyun%-example.com。	[有効]

8. クロスオリジンリクエストで許可されるオリジンを指定するパラメータを構成し、OK をクリックします。

   

   次の表にパラメータを示します。

   パラメータ	説明	例
   実行内容	このパラメータは 追加 に設定する必要があります。	追加
   応答ヘッダー	このパラメータは Access-Control-Allow-Methods に設定する必要があります。	Access-Control-Allow-Methods
   応答ヘッダー値	有効な値: GET 、POST 、および PUT 。 GET 、POST 、および PUT を同時に追加する場合は、コンマ (,) で区切ります。	GET
   重複の許可	[はい]: 重複ヘッダーが許可されます。 オリジンサーバーから返されたヘッダーと、応答に追加されたヘッダーがクライアントに返されます。 [いいえ]: 重複ヘッダーは許可されません。 オリジンサーバーから返されたヘッダーは、応答に追加されたヘッダーによって上書きされます。	いいえ

例

よくある質問

詳細については、「応答ヘッダーを構成しても、CORS の問題が報告され、Access-Control-Allow-Origin 応答ヘッダーが返されないのはなぜですか。」をご参照ください。