Object Storage Service:クロスオリジンリソース共有 (CORS) の設定

セキュリティのベストプラクティス

最小権限の原則に従ってください。

• [オリジン (AllowedOrigin)] を正確に設定します。バケットが完全に公開されている場合を除き、オリジン に * を設定しないでください。https://www.example.com のように、正確なドメインを指定します。

• [許可されたメソッド] を制限します。アプリケーションに必要な HTTP メソッドのみを公開します。読み取り専用サイトの場合は、GET と HEAD のみを設定します。

• [許可されたヘッダー] を明示的に指定します。認証を伴うリクエスト (Authorization ヘッダーを含む) の場合、* を使用しないでください。必要なすべてのリクエストヘッダーを明示的にリストします。

パフォーマンスのベストプラクティス

• プリフライトキャッシュを最適化します。86400 秒 (24 時間) などの適切な MaxAgeSeconds 値により、プリフライトリクエストが大幅に削減され、レイテンシーとコストが低減されます。

• Vary: Origin の影響を評価します。Vary: Origin を有効にすると、キャッシュポイズニングの問題は解決されますが、CDN キャッシュの複雑さが増加します。これにより、キャッシュヒット率が低下し、オリジントラフィックが増加する可能性があります (追加のコストとレイテンシー)。トラフィックパターンを評価した後にのみ有効にしてください。

CDN アクセラレーション

バケットが Alibaba Cloud CDN によって高速化され、CDN ドメイン経由でアクセスされる場合、オリジン間リクエストは最初に CDN ポイントオブプレゼンス (PoP) に到達します。OSS コンソールではなく、CDN コンソールで CORS ルールを設定する必要があります。OSS の CORS 設定は、OSS オリジンドメインに直接行われるリクエストにのみ適用されます。詳細については、「オリジン間リソース共有の設定」をご参照ください。

エラー： No 'Access-Control-Allow-Origin' header is present on the requested resource.

このエラーは通常、ブラウザーが CORS ヘッダーを含まない古いレスポンスをキャッシュしているか、受信リクエストに一致する CORS ルールが存在しないことを示します。

ブラウザーのキャッシュをクリアして再テストしてください。エラーが解決しない場合は、CORS ルールを確認してください。

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

2. [バケット] をクリックし、対象のバケットの名前をクリックします。

3. 左側メニューで、[コンテンツセキュリティ] > [CORS] を選択します。

4. CORS ページで、[ルールの作成] をクリックします。

5. [CORS ルールの作成] パネルで、[オリジン] を * に設定し、すべての [許可されたメソッド] を選択し、[許可されたヘッダー] を * に設定し、[公開ヘッダー] を ETag および x-oss-request-id に設定し、[キャッシュの有効期間 (秒)] を 0 に設定し、[Vary: Origin] を選択して、[OK] をクリックします。

6. 問題が解決しない場合は、任意のサーバーにログインし、次のコマンドを実行してクロスオリジンリクエストヘッダーを表示します。

   curl -v -o output_file.txt -H 'Origin:[$URL2]' '[$URL1]'

   説明

   • [URL1] は、リクエスト対象の OSS リソースの URL です。

   • [URL2] は、CORS ルールで設定したオリジンアドレスです。

   次のような出力が表示されます。

   

   • レスポンスに一致する CORS ヘッダーが含まれている場合、問題はブラウザーまたはネットワークのキャッシュが原因である可能性があります。以前の非 CORS リクエストがローカルにキャッシュされ、後続のクロスオリジンリクエストがサーバーから新しいレスポンスを取得する代わりに、このキャッシュされたレスポンスを取得した可能性があります。次の解決策を試してください。

     • ブラウザーで Ctrl+F5 キーを押してキャッシュをクリアし、問題が解決するかどうかをテストしてください。

     • CORS ルールで [キャッシュの有効期間 (秒)] を 0 に設定してください。これにより、すべてのリクエストでサーバーから CORS 認可を再取得するようになります。

       説明

       オブジェクトのアップロード時に、オブジェクトの cache-control を no-cache に設定できます。すでにアップロードされているオブジェクトの場合は、ossutil を使用してこの設定を変更できます。詳細については、「set-meta (オブジェクトメタデータの管理)」をご参照ください。

     • CDN を使用して OSS を高速化し、CDN 経由で配信されるすべてのリクエストに CORS ヘッダーが含まれるようにしてください。

   • レスポンスに 2 つの CORS ヘッダーが含まれているか、OSS 設定と一致しないヘッダーが含まれている場合、問題は CDN を使用した OSS の高速化が原因である可能性があります。

     1. CDN コンソールにログインし、ドメイン名の CDN アクセラレーションを一時的に無効にして、クロスオリジンの問題が解決することを確認してください。

     2. 確認後、特定のドメイン名をクリックし、[キャッシュ設定] > [ノード HTTP レスポンスヘッダー] に移動します。

     3. 必要に応じてカスタム HTTP レスポンスヘッダーを設定してください。

7. CORS の問題がまだ解決しない場合は、「OSS CORS の一般的なエラーと解決策」を参照してください。

エラー： The 'Access-Control-Allow-Origin' header has a value '...' that is not equal to the supplied origin.

サーバーは Access-Control-Allow-Origin ヘッダーを返しましたが、その値がリクエストの Origin と一致しません。これは多くの場合、キャッシュの問題です。ブラウザーまたは CDN が 1 つのドメインのレスポンスをキャッシュし、それを別のドメインに提供しています。

CORS ルールで Vary: Origin オプションを有効にして異なる Web サイト間のキャッシュの競合を防ぐか、再試行する前にブラウザーのキャッシュをクリアしてください。

エラー： Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

このエラーは、フロントエンドが認証情報を含むリクエストを送信した (Access-Control-Allow-Credentials が True) ものの、Access-Control-Allow-Origin が * に設定されているために発生します。ブラウザーは、Cookie や Authorization トークンなどの機密データに任意のサイトがアクセスするのを防ぐため、この組み合わせを禁止しています。

• 認証情報が必要な場合は、オリジン を * から特定のドメイン (例: https://example.com) に変更してください。

• 認証情報が不要な場合は、フロントエンドコードで xhr.withCredentials を false に設定し、サーバー側で Access-Control-Allow-Credentials が false であることを確認してください。

OSS からのクロスオリジン読み込み速度の改善

クロスオリジンの読み込み速度は、クライアントと OSS バケット間のネットワーク遅延に依存します。クロスオリジンリクエストには Origin ヘッダーが含まれます。長距離アクセス (例: China (Hong Kong) から中国本土) の場合は、転送アクセラレーション エンドポイントを使用してネットワークパスを最適化してください。