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

静的 Web サイトリソースの読み込み

https://www.example.com の Web サイトは、OSS バケットに保存されているイメージ、CSS、および JS ファイルを読み込む必要があります。

ステップ 1: CORS ルールを設定する

[OSS コンソール]にログインします。宛先バケットの [データセキュリティ] > [CORS 設定] ページに移動し、次のようにルールを作成します。

ステップ 2: 設定を検証する

https://www.example.com にアクセスし、イメージなどの OSS リソースが正しく読み込まれ、ブラウザコンソールに CORS エラーがないことを確認します。

フロントエンドから直接ファイルをアップロードする

Web ページ https://app.example.com のユーザーは、プロフィール写真やドキュメントなどのファイルを OSS に直接アップロードします。

ステップ 1: CORS ルールを設定する

[OSS コンソール]にログインします。宛先バケットの [データセキュリティ] > [CORS 設定] ページに移動し、次のようにルールを作成します。

ステップ 2: 設定を検証する

https://app.example.com ページでアップロード操作を実行します。ファイルが OSS に正常にアップロードされ、ブラウザコンソールに CORS エラーがないことを確認します。

複数の環境をサポートする

dev.example.com や app.example.com など、開発、テスト、本番用の複数のサブドメインが同じ OSS リソースにアクセスする必要があります。

ステップ 1: CORS ルールを設定する

[OSS コンソール]にログインします。宛先バケットの [データセキュリティ] > [CORS 設定] ページに移動し、次のようにルールを作成します。

ステップ 2: 設定を検証する

https://dev.example.com と https://app.example.com の両方でアクセスまたはアップロードテストを実行し、すべての操作が成功することを確認します。

認証付きで API スタイルの呼び出しを行う

https://api.example.com のフロントエンドアプリケーションは、Authorization などのカスタムヘッダーを含めることで、保護された OSS リソースにアクセスする必要があります。

ステップ 1: CORS ルールを設定する

[OSS コンソール]にログインします。宛先バケットの [データセキュリティ] > [CORS 設定] ページに移動し、次のようにルールを作成します。

ステップ 2: 設定を検証する

https://api.example.com ページから Authorization ヘッダー付きのリクエストを開始し、保護された OSS リソースにアクセスできることを確認します。

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

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

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

• [許可されるメソッド (AllowedMethod)] を制限する: ビジネスに必要な HTTP メソッドのみを公開します。Web サイトがデータの読み取りのみを必要とする場合は、GET と HEAD のみを設定します。

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

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

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

• Vary: Origin の影響を評価する: Vary: Origin を有効にすると、キャッシュ汚染の問題が解決されますが、CDN キャッシュの複雑さが増します。これにより、キャッシュヒット率が低下し、CDN back-to-origin トラフィックが増加し、追加のコストとレイテンシーが発生する可能性があります。このオプションは、十分な評価を行った後にのみ使用してください。

CDN アクセラレーションシナリオ

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

エラー: リクエストされたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません。

このエラーは通常、ブラウザが 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 に設定します。これにより、リソースがクライアントにキャッシュされるのを防ぎ、すべてのリクエストがサーバーから権限付与情報を取得するようになります。

       説明

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

     • CDN を使用して OSS を高速化します。これにより、CDN によって提供されるすべてのリクエストが CORS ヘッダーを返すようになります。

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

     1. [CDN コンソール]にログインし、OSS の CDN アクセラレーションを一時的に無効にして、クロスオリジンの問題が解決したことを確認します。

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

     3. 必要に応じてカスタム HTTP 応答ヘッダーを設定します。

7. CORS の問題がまだ解決しない場合は、さらなるトラブルシューティングについて「OSS のオリジン間リソース共有 (CORS) の一般的なエラーと解決策」をご参照ください。

エラー: 「Access-Control-Allow-Origin」ヘッダーの値「...」が、指定されたオリジンと一致しません。

サーバーは Access-Control-Allow-Origin ヘッダーを返しましたが、その値が現在のリクエストの Origin と一致しません。これは多くの場合、キャッシュの問題です。複数の Web サイトドメイン名が OSS にアクセスするように設定した場合、ブラウザまたは CDN が 1 つの Web サイトのアクセス権限をキャッシュし、それを誤って別の Web サイトに提供することがあります。

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

エラー: プリフライトリクエストへの応答がアクセス制御チェックをパスしません: リクエストの credentials モードが「include」の場合、応答の「Access-Control-Allow-Origin」ヘッダーの値はワイルドカード「*」であってはなりません。

このエラーは、フロントエンドコードが認証情報付きのリクエストを送信し、Access-Control-Allow-Credentials が True であるにもかかわらず、Access-Control-Allow-Origin がワイルドカード * として設定されているために発生します。セキュリティ上の理由から、ブラウザはこの場合にワイルドカードオリジンの使用を禁止し、任意のドメインがリソースにアクセスして認証情報を取得するのを防ぎます。この情報には、Cookie や Authorization ヘッダーなどの機密データが含まれます。

• リクエストヘッダーに Credentials 情報を含めるには、Access-Control-Allow-Origin の値をワイルドカード * から特定のドメイン名 (例: https://example.com) に変更します。

• リクエストヘッダーに Credentials 情報を含める必要がない場合は、フロントエンドコードで xhr.withCredentials を false に設定し、サーバー側で Access-Control-Allow-Credentials が false に設定されていることを確認します。

OSS からのクロスオリジン読み込みが遅い場合、どうすれば改善できますか？

クロスオリジンリクエストは、Origin ヘッダーを含む標準の HTTP リクエストです。読み込み速度は、リクエストがクロスオリジンであるかどうかではなく、クライアントと OSS バケット間の物理的なネットワークパスに依存します。たとえば、クライアントが中国 (香港) にあり、バケットが中国本土にある場合、これは長距離アクセスと見なされます。この場合、OSS 転送アクセラレーションエンドポイントを使用してネットワークパスを最適化できます。詳細については、「転送アクセラレーション」をご参照ください。