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

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

最小権限の原則に従います。

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

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

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

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

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

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

CDN による高速化

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

エラー： 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 ヘッダーが含まれます。長距離アクセス (例: 中国 (香港) から中国本土) の場合は、転送アクセラレーション エンドポイントを使用してネットワークパスを最適化してください。