edit-icon download-icon

CORS エラーのトラブルシューティング方法

最終更新日: Oct 30, 2019

概要

このドキュメントでは、クロスオリジンリソース共有 (CORS) の設定方法と CORS エラーのトラブルシューティング方法について説明します。

 

説明

設定項目

CORS ルールは、ルールの条件を満たすリクエストにのみ適用されます。各ルールの設定は一意である必要があります。他のオプションでは、必要な権限のみが許可されます。 CORS の設定項目は次のとおりです。

  • ソース: リクエストを許可するオリジンを指定します。複数のオリジンを指定できます。完全なドメイン名を入力します。例:「http://10.X.X.100:8001 」 や 「https://www.aliyun.com 」 などです。プロトコル名 HTTP または HTTPS をドメイン名に含める必要があることに注意してください。ポートがデフォルトポート 80 でない場合は、ドメイン名にポートを含めます。ドメイン名の情報を表示するには、ブラウザーのデバッグ機能を使用してヘッダーのオリジンを表示できます。ドメイン名にワイルドカードとして使用できるのは、アスタリスク () 1 つのみです。例:https://.aliyun.com。 [ソース] が に設定されている場合、すべてのクロスオリジンリクエストが許可されます。
  • 許可されたメソッド: リクエスト要件に基づいてメソッドを選択します。デバッグを実行するときにすべてのメソッドを選択できます。
  • 許可されたヘッダー:クロスオリジンリクエストで許可されるヘッダーを指定します。複数のヘッダーをキャリッジリターンで区切ります。 Access-Control-Request-Headers で指定された各ヘッダーは、許可されたヘッダーの値と一致する必要があります。特別なヘッダー要件がない場合は、すべてのリクエストを許可するために [許可されたヘッダー] をアスタリスク () に設定することを推奨します。 [許可されたヘッダー] では大文字と小文字を区別しません。
  • 公開ヘッダー:オプション。ブラウザーで公開可能なヘッダーのリストを指定します。ヘッダーは、JavaScript の XMLHttpRequest など、アプリケーションからのアクセスを許可する応答ヘッダーです。ワイルドカードは使用できません。個別の設定は、使用するヘッダーのみを公開するためのアプリケーションの要求に依存します。ヘッダーを公開したくない場合は、このフィールドを空のままにしておくことができます。公開ヘッダーでは、大文字と小文字を区別しません。
  • キャッシュ時間(秒):オプション。ブラウザーが特定のリソースへのプリフライト (OPTIONS) リクエストへの応答をキャッシュできる時間を秒単位で指定します。このパラメーターは、60 秒などの大きな値に設定することを推奨します。

 

トラブルシューティング

エラー

CORS 設定エラーは次のように報告されます。

  • ブラウザーは次のエラーを報告します。
    1. OPTIONS http://bucket.oss-cn-beijing.aliyuncs.com/XMLHttpRequest cannot load http://bucket.oss-cn-beijing.aliyuncs.com/. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘{yourwebsiet}’ is therefore not allowed access. The response had HTTP status code 403.

  • OSS は次のエラーを報告します。
    1. <Code>AccessForbidden</Code><Message>CORSResponse: This CORS request is not allowed. This is usually because the evalution of Origin, request method / Access-Control-Request-Method or Access-Control-Requet-Headers are not whitelisted by the resource’s CORS spec. </Message>
  • その他のエラーの詳細については、 「OSS 403」をご参照ください。

注意:

  • Web サイトで OSS を使用し、CORS 設定が適切でない場合、CORS エラーが発生します。ブラウザーからリクエストの詳細を表示できます。 Google Chrome を使用している場合は、F12 を押して開発者ツールにアクセスします。 [ネットワーク] タブで、対応する要素の情報を表示できます。
  • OSS から返されるエラーは、パケットをキャプチャすることで取得できます。たとえば、Wireshark を使用して、パケットをキャプチャするフィルターとしてホスト ([$Bucket_Name].oss-cn-beijing.aliyuncs.com) を指定できます。
  • OSS から返されたエラーは、CORS デバッグプログラム oss-h5-upload-js-direct を使用して取得することもできます。

 

トラブルシューティング

考えられる CORS エラーは次のとおりです。

  • ソース設定エラー
  • 許可されたメソッドの設定エラー
  • 許可されたヘッダーの設定エラー
  • 公開ヘッダーの設定エラー

 

デバッグ方法

OSS コンソールで、バケットを選択します。[基本設定] をクリックします。[クロスオリジンリソース共有の設定] セクションで、 [設定] をクリックします。以下のパラメーターを設定します。

  • [ソース] をアスタリスク () に設定します。このパラメーターが正しく設定されていることを確認してください。このパラメーターをアスタリスク () に設定した後にオブジェクトが正常にアップロードされる場合、[ソース] は正しく設定されていません。ルールに基づいてこの設定を確認してください。
  • [許可されたメソッド] にすべてのオプション GET、PUT、DELETE、POST、および HEAD を選択します。このパラメーターが正しく設定されていることを確認してください。
  • [許可されたヘッダー] をアスタリスク (*) に設定します。このパラメーターが正しく設定されていることを確認してください。
  • [公開ヘッダー] を指定した値に設定するか、このパラメーターを指定しないままにします。このパラメーターが正しく設定されていることを確認してください。

 

参照資料

CORS の説明と設定の詳細については、「CORS ルールの設定」をご参照ください。

 

適用範囲

  • OSS