Alibaba Cloud DCDN にドメインを追加した後、カスタム HTTP レスポンスヘッダーを設定することで、クロスオリジンリソース共有 (CORS) を有効にし、異なるオリジンからのリソースにアクセスできるようになります。
CORS とは
クロスオリジンリソース共有(CORS)は、Web ページが異なるオリジンサーバーからリソースにアクセスしてロードできるようにするために HTML5 によって提供される標準のクロスオリジンソリューションです。 これにより、データ転送のセキュリティが確保されます。 詳細については、「Cross-Origin Resource Sharing (CORS)」をご参照ください。
メリット
セキュリティ上の理由から、ブラウザは同一オリジンポリシーを使用します。 これにより、Web ページが異なるドメインまたはサブドメインから、あるいは異なるプロトコルまたはポートを介してリソースにアクセスしてロードするためのリクエストを開始することが制限されます。 たとえば、example.com は example.org 上のリソースにアクセスできません。 CORS を構成すると、DCDN サーバーで応答ヘッダーを指定できます。 DCDN リソースへのアクセス要求が許可されたルールに準拠したヘッダーを保持している場合、クロスオリジンリソースをロードしてアクセスできます。
CORSの仕組み
CORS 無効
クライアントは
http://example.com/index.htmlのリクエストをexample.comに送信します。example.comはindex.htmlファイルをクライアントに返します。 ファイルの URL には、別のオリジンサーバーのリソースへの URL が含まれています:http://example.org/image_01.png。クライアントは
http://example.org/image_01.pngのリクエストをexample.orgに送信します。example.orgは、Access-Control-Allow-Origin: *などのクロスオリジンヘッダーを返します。クライアントは応答を受信し、ブラウザはヘッダー値をチェックします。 ヘッダー値はアスタリスク (*) で、すべてのオリジンからのクロスオリジンリクエストが許可されていることを示します。 次に、ブラウザは応答を表示します。
CORS 有効
クライアントは
http://example.com/index.htmlのリクエストを DCDN に送信します。DCDN は
index.htmlファイルをクライアントに返します。 ファイルの URL には、別のオリジンサーバーのリソースへの URL が含まれています:http://example.org/image_01.png。クライアントは
http://example.org/image_01.pngのリクエストを DCDN に送信します。 リクエストにはOrigin:http://example.comヘッダーが含まれています。DCDN はリクエストを受信し、リクエスト内の
Originヘッダーの値を、構成されたAccess-Control-Allow-Originの値と比較します。Access-Control-Allow-Originには、1 つ以上の値、またはワイルドカードドメイン名を指定できます。Access-Control-Allow-Originは、上記のヘッダー値が一致する場合にのみクライアントに返されます。DCDN は、
Access-Control-Allow-Origin:http://example.comなどのクロスオリジンヘッダーをクライアントに返します。クライアントは応答を受信し、ブラウザはヘッダー値をチェックします。 ヘッダー値は
http://example.comで、http://example.comからのクロスオリジンリクエストが許可されていることを示します。 次に、ブラウザは応答を表示します。
注意事項
オリジンサーバーが Object Storage Service (OSS) バケットであり、OSS と DCDN コンソールの両方で CORS が構成されている場合、DCDN コンソールの CORS 設定が使用されます。 OSS コンソールでの CORS 設定の詳細については、「CORS」をご参照ください。
DCDN コンソールで設定された、
Access-Control-Allow-OriginCORS ヘッダーなどの HTTP レスポンスヘッダーは、動的 API リクエストを含むすべてのリソースタイプに適用されます。
CORSの有効化
- DCDNコンソールにログインします。
- 左側のナビゲーションペインで ドメイン名 をクリックします。
On theドメイン名ページで、管理するドメイン名を見つけて、設定.
- ドメイン名の左側のナビゲーションウィンドウで、[キャッシング] をクリックします。
アウトバウンドレスポンスヘッダーの変更 タブをクリックし、次に 追加 をクリックして、DCDN ノードがレスポンスに追加する HTTP レスポンスヘッダーを設定します。
次のパラメーターを設定して、オリジン間リクエストで許可するオリジンを指定し、OK をクリックします。

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

パラメータ
説明
例
実行内容
このパラメータは 追加 に設定する必要があります。
追加
応答ヘッダー
このパラメータは
Access-Control-Allow-Methodsに設定する必要があります。Access-Control-Allow-Methods
応答ヘッダー値
有効な値:
GET、POST、およびPUT。GET、POST、およびPUTを同時に追加する場合は、コンマ (,) で区切ります。GET重複の許可
[はい]: 重複ヘッダーが許可されます。 オリジンサーバーから返されたヘッダーと、応答に追加されたヘッダーがクライアントに返されます。
[いいえ]: 重複ヘッダーは許可されません。 オリジンサーバーから返されたヘッダーは、応答に追加されたヘッダーによって上書きされます。
いいえ
例
例 1:完全一致
`Access-Control-Allow-Origin` ヘッダーをカンマ (`,`) で区切られた 1 つ以上の特定のオリジンに設定した場合:
-
リクエストの `Origin` ヘッダーが設定されたオリジンのいずれかと完全に一致する場合、/DCDN POP は一致したオリジンを含む `Access-Control-Allow-Origin` ヘッダーを返します。
-
完全一致が見つからない場合、`Access-Control-Allow-Origin` ヘッダーは返されません。
DCDN で、Access-Control-Allow-Origin: http://example.com, https://aliyundoc.com を設定します。
-
`Origin` ヘッダーが
http://example.comのユーザーリクエストに対して、DCDN POP はAccess-Control-Allow-Origin: http://example.comで応答します。 -
ユーザーリクエストの Origin ヘッダーが
https://aliyundoc.comの場合、DCDN ノードはAccess-Control-Allow-Origin: https://aliyundoc.comで応答します。 -
ユーザーリクエストの `Origin` ヘッダーが
http://aliyundoc.comの場合、ヘッダーのプロトコルが一致しないため、DCDN POP は応答しません。ユーザーリクエストは HTTP プロトコルを使用していますが、DCDN では HTTPS プロトコルが設定されています。 -
リクエストの Origin ヘッダーが
http://aliyun.comの場合、DCDN POP は応答しません (ドメイン名の不一致)。
例 2:ワイルドカードドメイン名一致
`Access-Control-Allow-Origin` ヘッダーをワイルドカードドメイン名に設定すると、CDN POP はリクエストの `Origin` ヘッダーをワイルドカードパターンと照合します。
DCDN で、 Access-Control-Allow-Origin: http://*.aliyundoc.com を設定します。
-
リクエストの `Origin` ヘッダーが
http://demo.aliyundoc.comの場合、DCDN POP はAccess-Control-Allow-Origin: http://demo.aliyundoc.comで応答します。 -
ユーザーリクエストに Origin ヘッダー
http://demo.example.comが含まれている場合、ドメイン名が一致しないため、DCDN POP は応答しません。 -
Origin ヘッダーが
https://demo.aliyundoc.comのユーザーリクエストに対して、プロトコルの不一致により DCDN POP は応答しません。ユーザーリクエストは HTTPS を使用していますが、DCDN は HTTP 用に設定されています。