お使いのサービスを Alibaba Cloud CDN に追加した後、POP (Point of Presence) で HTTP レスポンスヘッダーを設定することで、オリジン間のアクセスを有効にできます。
オリジン間リソース共有 (CORS) とは
オリジン間リソース共有 (CORS) は、Web ページが自身のオリジン (ドメイン、プロトコル、またはポート) とは異なるオリジンからリソースにアクセスできるようにする標準的なメカニズムです。これにより、オリジン間の安全なデータ転送が可能になります。 詳細については、「オリジン間リソース共有 (CORS)」をご参照ください。
デフォルトでは、CDN はオリジン間リソース共有 (CORS) を有効にしていません。 この設定がない場合、ブラウザは同一オリジンポリシーを適用し、オリジン間のリクエストをブロックするため、他の Web サイトがリソースを読み込むことができなくなります。
オリジン間リソース共有 (CORS) を設定する理由
セキュリティ上の制限により、ブラウザは通常、同一オリジンポリシーに従います。これにより、異なるドメイン、サブドメイン、プロトコル、またはポートからのリソースの読み込みとアクセスが制限されます。 たとえば、example.com は example.org のリソースにアクセスできません。 オリジン間リソース共有 (CORS) を設定することで、CDN サーバーに関連するレスポンスヘッダーを設定できます。 リクエストに含まれるヘッダーが許可ルールに一致する場合、サーバーは対応する HTTP レスポンスヘッダーを返し、オリジン間のリソースの読み込みとアクセスを許可します。
仕組み
オリジンサーバーで CORS を設定した場合
CDN で CORS を設定した場合
注意事項
OSS バケットをオリジンサーバーとして使用する場合、CDN コンソールの CORS 設定は、OSS コンソールの CORS 設定を上書きします。 OSS コンソールで CORS を設定する方法の詳細については、「CORS ルールの設定」をご参照ください。
オンプレミスサーバーまたは ECS インスタンスをオリジンサーバーとして使用する場合、静的コンテンツと動的コンテンツを分離し、CDN を使用して静的ファイルの配信を高速化することを推奨します。 CDN コンソールで設定された CORS 機能は、静的ファイルにのみ適用されます。
オリジン間リソース共有 (CORS) の有効化
Alibaba Cloud CDN コンソールにログインします。
左側のナビゲーションペインで [ドメイン名 ] をクリックします。
[ドメイン] ページで、管理するドメイン名を見つけ、管理 列の 操作 をクリックします。
キャッシュ設定 をクリックし、送信レスポンスヘッダーの変更 タブを選択して、オリジン間リクエストで許可するソースとメソッドを設定します。
オリジン間リクエストのオリジンの設定
追加 をクリックし、次の表の説明に従ってパラメーターを設定してから、OK をクリックします。
パラメーター
説明
例
[実行内容]
このパラメーターを 追加 に設定して、CORS 検証機能を有効にします。
[追加]
[応答ヘッダー]
オリジン間検証機能を使用するには、
Access-Control-Allow-Originを設定する必要があります。Access-Control-Allow-Origin
[応答ヘッダー値]
CORS 検証が無効な場合:ワイルドカードまたは単一のオリジンのみを指定できます。
ワイルドカード (
*):任意のオリジンからのリソースへのアクセスを許可します。単一のオリジン:特定のオリジン (ドメイン名) からのリソースへのアクセスのみを許可します。
CORS 検証が有効な場合:ワイルドカード、単一のオリジン、複数のオリジン、またはワイルドカードドメインを指定できます。
ワイルドカード (
*):任意のオリジンからのリソースへのアクセスを許可します。単一のオリジン:特定のオリジン (ドメイン名) からのリソースへのアクセスのみを許可します。
複数の指定オリジン:複数の特定のオリジン (ドメイン名) をコンマ
,で区切って設定し、これらのオリジンからのリソースへのアクセスを許可します。重要複数のオリジンを指定する場合は、コンマ (
,) で区切る必要があります。 代わりにセミコロン (;) を使用すると、CORS 設定は有効になりません。 コンソールでは設定が成功したように表示されますが、CDN はセミコロンで区切られた文字列全体を単一のオリジンとして扱います。 このオリジンはリクエスト内の個々のドメインと一致しないため、CORS は機能しません。ワイルドカードドメイン:ワイルドカードドメインを指定して、パターンに一致するすべてのオリジンからのアクセスを許可します。
*http://www.aliyun.comhttps://aliyun.com,http://www.aliyun.comhttp://*.aliyun.com
[重複の許可]
はい:オリジンサーバーからのヘッダーは保持され、同じ名前の新しいヘッダーもレスポンスに追加されます。
いいえ:新しいヘッダーが、オリジンサーバーからの同じ名前のヘッダーを置き換えます。
重要[重複の許可] と [CORS 検証] の設定は相互に排他的です。 [重複の許可] を [はい] に設定すると、CORS 検証は無効になります。
[いいえ]
[CORS]
[CORS] は、実行内容 が 追加 に設定され、応答ヘッダー が「Access-Control-Allow-Origin」に設定されている場合にのみ設定できます。
[CORS] は しない または 有効 に設定できます。 デフォルト値は しない です。
[しない]:CDN POP は受信リクエストの
Originヘッダーを検証せず、常に設定されたAccess-Control-Allow-Originの値を返します。[有効]:CDN POP は、次のルールに基づいてオリジン間リクエストを検証し、それに応じて
Access-Control-Allow-Originの値を返します。[応答ヘッダー]:応答ヘッダー が
*に設定されている場合、ユーザーリクエストにOriginヘッダーが含まれているかどうかにかかわらず、POP は常にAccess-Control-Allow-Origin:*を返します。[応答ヘッダー]:応答ヘッダー が、カンマ (
,) で区切られた 1 つ以上の特定のオリジンに設定されている場合:ユーザーリクエストの
Originヘッダーの値が、設定されたオリジンのいずれかと完全に一致する場合、POP はそのオリジンをAccess-Control-Allow-Originヘッダーの値として返します。一致するものが見つからない場合、POP は CORS ヘッダーをレスポンスに追加しません。
[応答ヘッダー]:応答ヘッダー がワイルドカードドメインに設定されている場合、POP はリクエストの
Originヘッダーがワイルドカードパターンと一致するかどうかを確認します。
有効 を 応答ヘッダー値 に設定し、かつ 応答ヘッダー値 フィールドのドメイン名にハイフン (
-) が含まれる場合は、-を%-に置き換えてエスケープする必要があります。 例:元のヘッダー値:
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
CORS のレスポンスヘッダー値が、カンマ (,) で区切られた 1 つ以上の特定のオリジンに設定されている場合:
ユーザーリクエストの
Originヘッダーの値が指定されたオリジンのいずれかと完全に一致する場合、CDN POP は対応する CORS ヘッダーを返します。完全に一致するものが見つからない場合、CORS ヘッダーはレスポンスに含まれません。
CDN で、Access-Control-Allow-Origin: http://example.com,https://aliyundoc.com を設定します。
ユーザーリクエストの
Originヘッダーがhttp://example.comの場合、CDN の POP (Point of Presence) はAccess-Control-Allow-Origin: http://example.comを返します。ユーザーリクエストの
Originヘッダーがhttps://aliyundoc.comの場合、CDN ノードはAccess-Control-Allow-Origin: https://aliyundoc.comを返します。CDN ノードは、Origin ヘッダーに
http://aliyundoc.comが指定されたユーザーリクエストには応答しません (ユーザーリクエストは HTTP を使用しますが、CDN は HTTPS 用に設定されているため、プロトコルが一致しません)。リクエストの
Originヘッダーがhttp://aliyun.comの場合、CDN POP は CORS ヘッダーを返しません (ドメインの不一致)。
例 2
CORS のレスポンスヘッダー値がワイルドカードドメインに設定されている場合、POP はリクエストヘッダーの Origin 値がワイルドカードパターンと一致するかどうかを確認します。
CDN で、Access-Control-Allow-Origin: http://*.aliyundoc.com を設定します。
ユーザーリクエストに Origin ヘッダー
http://demo.aliyundoc.comが含まれている場合、CDN POP はAccess-Control-Allow-Origin: http://demo.aliyundoc.comを返します。リクエストの Origin ヘッダーが
http://demo.example.comの場合、ドメイン名が一致しないため、CDN POP は CORS ヘッダーを返しません。リクエストでは HTTPS プロトコルが使用されていますが、CDN は HTTP プロトコルで設定されているため、CDN ノードは、Origin ヘッダー
https://demo.aliyundoc.comを含むユーザーからのリクエストに応答しません。
CORS 設定の有効性の確認
CDN は完全な HTTP レスポンスをキャッシュするため、新しいクロスドメインレスポンスヘッダーは、以前にキャッシュされたリソースには自動的に適用されません。 新しい Access-Control-Allow-Origin 設定を適用するには、CDN キャッシュから対応するリソースを消去する必要があります。 そうしないと、ユーザーはヘッダーを含まない古いキャッシュからのレスポンスを受信し続けます。
curl を使用して、指定した Origin ヘッダーを含む GET リクエストを送信し、詳細出力でレスポンスヘッダーを確認します:
curl -svo /dev/null https://<高速化ドメイン名>/resource/path -H 'origin:https://your-site.example.com'レスポンスの
Access-Control-Allow-Originヘッダーを確認します。 ヘッダーの値が*であるか、リクエストの Origin と一致する場合、設定は有効です。
注意事項と制限事項
ワイルドカードドメイン設定の制限事項
CORS 検証を有効にした後、設定できるのは単一のワイルドカードドメイン、またはカンマで区切られた複数の完全一致ドメイン (非ワイルドカード) のみです。 複数のワイルドカードドメインを直接カンマで区切ることはできません (例:https://*.example.com,https://*.example.org)。
フォントファイルと動画ファイルの違い
フォントファイル (.ttf、.woff など) は、読み込み方法に関係なく、常にブラウザによって CORS レスポンスヘッダーが必須で検証されます。 <video> タグを介して読み込まれる動画ファイル (MP4、WebM など) は、crossorigin 属性が明示的に追加されない限り、デフォルトでは CORS の制限を受けません。 したがって、動画とフォントが同じドメインでホストされている場合でも、通常、動画へのアクセスでは CORS エラーは発生しませんが、フォントファイルへのアクセスでは発生します。 これはブラウザの仕様によるものです。
CDN が OSS を高速化する場合の CORS 設定
オリジンの OSS バケットから CORS 設定をパススルーしたい場合は、最初のリクエストに Origin ヘッダーが含まれていることを確認してください。 これにより、CDN はオリジンからフェッチし、OSS によって返された Access-Control-Allow-Origin レスポンスヘッダーをキャッシュできます。 ただし、キャッシュメカニズムにより、Origin ヘッダーを含まない、または異なる Origin を含む後続のリクエストでオリジン間の問題が発生する可能性があります。
推奨プラクティス:パススルーに依存するのではなく、CDN コンソールの [キャッシュ設定] にある「送信レスポンスヘッダーの変更」機能を使用して、CORS 関連のレスポンスヘッダーを追加します。
複数の CDN ドメインが同じ OSS バケットに関連付けられている場合、OSS で CORS ルールを一度だけ設定し、CDN に自動的に継承させることはできません。 CDN POP はレスポンスヘッダーをキャッシュし、キャッシュの動作は最初のリクエストに Origin ヘッダーが含まれているかどうかに影響されるため、CDN コンソールで各 CDN ドメインに対して個別に CORS ルールを設定する必要があります。
OPTIONS プリフライトリクエストに対する 403 レスポンスの処理
Alibaba Cloud CDN が OSS を高速化し、ブラウザが OPTIONS プリフライトリクエストを送信すると、CDN はデフォルトで 403 を返します。 エッジスクリプトのカスタムポリシーを使用して OPTIONS リクエストをインターセプトし、直接 204 を返すことで、プリフライトリクエストが拒否されるのを防ぐことができます。
Alibaba Cloud CDN コンソールにログインし、[ドメイン管理] に移動します。
対象の高速化ドメイン名を選択します。
ドメイン設定ページで、[エッジスクリプト] をクリックします。
[ステージング環境] タブで、[ルールの追加] をクリックし、次のルールを追加します:
if eq($request_method, 'OPTIONS') { exit(204) }[優先度] を
0に設定し、ルールを保存します。 [ステージング環境] で OPTIONS リクエストが 204 を返すことを確認した後、ルールを [本番環境] に公開します。
エッジスクリプトの文字列は単一引用符を使用する必要があります。 二重引用符はサポートされていません。
Access-Control-Allow-Origin を設定した後も CORS エラーが解決しない場合のトラブルシューティング方法については、「キャッシュのトラブルシューティング」をご参照ください。