クロスオリジンリソース共有 (CORS) の導入と設定については、「CORS のベストプラクティス」をご参照ください。
設定項目
CORS の設定には以下の項目があります。
- Origin (AllowedOrigin)
CORS 要求が許可されたオリジン。 複数のオリジンを同時に指定できます。このパラメーターを設定するときは、
http://10.100.100.100:8001
またはhttps://www.aliyun.com
のように、完全なドメイン情報を入力する必要があります。プロトコル名 http または https は省略できません。ポートが既定値で80
ではない場合、ポートも設定する必要があります。ドメイン名が特定できない場合、ブラウザのデバッグ機能を有効にすることで、ヘッダーのOrigin
を確認することができます。https://*.aliyun.com
のように、ドメイン名にはワイルドカード*
を使用でき、各ドメイン名にはワイルドカード*
を1つだけ使用できます。オリジンとして*
が指定されている場合は、すべてのオリジンのドメイン間要求が許可されます。 - Method
必要に応じて許可された方法を選択します。 デバッグプロセスのため、すべてを選択できます。
- Allow Header
許可されたクロスオリジン要求ヘッダー。 複数のマッチルールを設定でき、キャリッジリターンで区切る必要があります。 Access-Control-Request-Headers で指定された各ヘッダーは、Allowed Header の値と一致している必要があります。ヘッダーはすぐに無くなります。 特に必要な場合を除き、すべてのヘッダーが許可されることを示す
*
を設定することを推奨します。 ヘッダーは大文字と小文字を区別しません。 - Expose Header
ブラウザーに公開されているヘッダーの一覧、つまりユーザーがアプリケーションからアクセスできるようにする応答ヘッダー (Javascript XMLHttpRequestオブジェクトなど)。 ワイルドカードの使用は許可されていません。 特定の構成はアプリケーションの要求によって異なります。 必要なヘッダーのみを公開します。 この情報を公開する必要がない場合は、このフィールドを空白のままにしておけます。 ヘッダーは大文字と小文字を区別しません。 ヘッダーの公開設定はオプション項目です。
- MaxAgeSeconds (キャッシュ時間 )
指定のリソースのブラウザプリフェッチ要求 (OPTION S要求) から返された結果のキャッシュ時間です。 単位は秒です。 通常、キャッシュ時間には比較的大きな値 (60 秒など) を設定します。 キャッシュ時間の設定はオプション項目です。
一般的に、CORS の設定方法は、サービスにアクセスする可能性のある各オリジンに対して個別の規則を設定します。 可能であれば、1 つのルールに複数のオリジンを含めず、複数のルールの重複や競合を避けることを推奨します。 他のオプションの設定については、必要な権限を付与するだけです。
トラブルシューティング
- エラー報告
CORS の設定エラーは次のように報告されます。
-
ブラウザは次のエラーを報告します。
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 は次のエラーを報告します。
<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>
注- CORS エラーは通常、サイトアプリケーションによって引き起こされます。 ブラウザーで要求の詳細を表示することができます。Chrome の場合は、
F12
を押して開発者ツール
を開き、ネットワーク
上の対応する要素を見ることができます。 - OSS から返されたエラーは、パケットキャプチャを通じて取得できます。 Wireshark を使用している場合は、
host bucket-name.oss-cn -beijing.aliyuncs.com
フィルターとして指定できます。 - OSS から返されるエラーは、CORS デバッグプログラム oss-h5-upload-js-direct を通じて取得することもできます。
その他のエラーについては、「OSS 403 エラーとトラブルシューティング」をご参照ください。
-
- トラブルシューティング
考えられる CORS エラーは次のとおりです。
- Origin (AllowedOrigin) が正しく設定されていません。
- Method (AllowedMethod) が正しく設定されていません。
- Allow Header が正しく設定されていません。
- Expose Header が正しく設定されていません。
デバッグ手順
- Origin (AllowedOrigin) を
*
に設定し、この設定項目が正しいことを確認します。 このパラメーターを*
に設定した後でアップロードが成功した場合、Origin (AllowedOrigin) が正しく設定されていないため、規則に従って慎重に確認する必要があります。 - Method (AllowedMethod) のすべてのオプション (GET、PUT、DELETE、POST、HEAD) を選択し、この設定項目が正しいことを確認します。
- Allow Headerを
*
に設定し、この設定項目が正しいことを確認します。 - Expose Header を指定した値に設定するか、フィールドを空白のままにして、この設定項目が正しいことを確認します。
注 OSSコンソールで、[バケット] をクリックし、[バケット属性クロスオリジン設定] に移動して上記項目を設定します。