API で Cross-Origin Resource Sharing (CORS) サポートを有効にすることができます。 CORS を使用すると、Web ページの埋め込みスクリプトによって、ドメインの境界を越えて API を呼び出すことができます。
開始前に
このタスクは OpenAPI 3.0 API 定義の構成に関連しています。 OpenAPI 2.0 API 定義の構成方法について詳しくは、 OpenAPI 2.0 API 定義の編集を参照してください。
このタスクについて
注:
- CORS サポートは.でのみ利用 DataPower® API Gateway可能です。
- CORS を有効にした場合、API ゲートウェイは
cors プリフロー・ポリシーを実行して、API に対して発行されたすべての CORS 要求を処理します。
- CORS が有効にされていて、プリフライト要求が受け取られた場合、以下の API アクションのみが実行されます。
cors プリフロー・ポリシーは、適切な応答ヘッダーを構成します。
- 応答ヘッダーが設定されます。
- プリフライト要求が受け取られると、
request.attributes.isCORSPreflight フラグが true に設定されます。
- すべてのプリフライト要求において、
security プリフロー・ポリシーと client-identification プリフロー・ポリシーは、CORS が有効にされているかどうかに関係なく、常にスキップされます。
このタスクは、 API Designer UI アプリケーションを使用するか、ブラウザー・ベースの API Manager UI を使用して実行できます。
「ソース 」アイコン
をクリックすると、いつでも直接、基盤となる OpenAPI のYAMLソースに切り替えることができます。 デザインフォームに戻るには、 フォームアイコンをクリックしてください
。
手順
API の CORS サポートを有効にするには、以下のステップを実行します。
- OpenAPI 3.0 API 定義の編集で説明されているように、編集のために API を開きます。
- [ ゲートウェイ ] タブを選択し、 [ゲートウェイとポータルの設定] を展開してから、をクリックします CORS。
ページ CORS が開きます。
- 「 CORS 」を有効にするを選択します。
- (任意) : CORS ポリシーを設定します。
CORS ポリシーを作成すべきですか? 次の考慮事項について確認してください。
- CORS ポリシーは、API定義のオプション部分です。 API定義に CORS ポリシーが存在せず、かつ CORS が有効な場合、 CORS リクエストはすべてのオリジンから受け入れられます。
すべてのオリジンからの CORS リクエストを受け入れたい場合は、 CORS を有効にしますが、API定義に CORS ポリシーを追加しないでください。
- CORS ポリシーを作成した場合、 CORS へのリクエストは、 CORS ポリシーに含まれる CORS ルールに明示的に記載されたオリジンからのみ受け入れられます。 CORS 他のオリジンからのリクエストは拒否されます。
CORS リクエストを特定のオリジンからのみ受け入れたい場合(また、Access-Control-Allow-CredentialsおよびAccess-Control-Expose-Headersレスポンスヘッダーの設定も行う可能性がある場合)、 CORS を有効化し、 CORS ポリシーを作成する必要があります。 CORS ポリシー内の CORS ルールでallow-originフィールドに明示的に記載されたオリジンからのみリクエストを受け付けます。記載されていないオリジンからの CORS リクエストは拒否されます。
- 新規の CORS ポリシーを構成するには、以下のステップを実行します。
- 「 CORS ポリシー」 の横にある「 追加 」をクリックします。
- 応答にヘッダー
Access-Control-Allow-Credentials: true を組み込みます。 「資格情報の許可」を選択します。 Access-Control-Allow-Credentials 応答ヘッダーは、要求の資格情報モード(Request.credentials)が include に設定されている場合に、フロントエンドの JavaScript コードに応答を公開するかどうかをブラウザーに指示します。
- 以下の 1 つ以上の値を
Access-Control-Expose-Headers 応答ヘッダーに追加するには、 「ヘッダーの公開」を選択し、以下のオプションから選択します。
- 事前定義 -ゲートウェイの事前定義値。 このオプションは、デフォルトで選択されています。
- Backend -バックエンド応答からの
Access-Control-Expose-Headers の値。
- Custom -カスタム・ストリング。
- 「作成」 をクリックします。
- 「許可された起点」 の横にある 「追加」をクリックします。
- オリジン URL を入力し、「作成」をクリックします。 この設定は、指定されたオリジンからの要求コードと応答を共有できることを示します。
- 既存の CORS ポリシーを変更するには、「CORS」ページでその「許可されたオリジン」項目をクリックします。 その後、個々のオリジン URL を変更したり、さらにオリジンを追加したり、「資格情報を許可」設定を変更したりすることができます。
- 例
- 以下の例では、3 つのルールがあります。
https://example.com のオリジン・ヘッダーを受け入れ、CORS 応答で Access-Control-Allow-Credentials: true を返します。
http://domain.com のオリジン・ヘッダーを受け入れます。 応答で Access-Control-Allow-Credentials ヘッダーは返されません。
- 以下のオリジン・ヘッダーを受け入れます。
http://example2.com
http://example3.com
http://example4.com
応答で Access-Control-Allow-Credentials ヘッダーは返されません。
cors:
enabled: true
policy:
-
allow-origin:
- 'https://example.com'
allow-credentials: true
-
allow-origin:
- 'http://domain.com'
-
allow-origin:
- 'http://example2.com'
- 'http://example3.com'
- 'http://example4.com'
- 変更内容を保存するには、 「保存」 をクリックします。
- (オプション) : カスタムOPTIONS 操作を使用して独自の CORS ソリューションを実装するには、以下の手順を実行してください:
- 以下のヘッダーを HTTP 応答に追加します。
Access-Control-Allow-Origin: https://<portalhostname>
Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept
ここには
、開発者ポータル/ <portalhostname> コンシューマーカタログのホスト名を入力してください。
- オプション: APIを強制的なinvoke APIとして API Connect プロキシ設定することで、 CORS が自動的に処理されるようにできます。
重要:
- 独自の CORS ソリューションを実装する場合は、 手順3 で説明されているオプション CORS を無効にする必要があります
- CORS プリフライト要求は、HTTP の
OPTIONS メソッドを使用することで送信されます。 したがって、これらのリクエストを API Connect ゲートウェイで処理する必要がある場合は、プリフライトリクエストを処理するすべてのAPIに対してこの OPTIONS メソッドを有効にする必要があります。詳しくは、 「REST APIのパスの定義」 を参照してください。
OPTIONS 要求は、構成済みのあらゆるレート制限を対象に、API 呼び出しとしてカウントされます。 個々の操作に対してレート制限を設定できる点にご注意ください。詳しくは、 「API 操作のレート制限の設定」 を参照してください。