API Management 開発者ポータルで対話型コンソールの CORS を有効にする

  • [アーティクル]

クロスオリジン リソース共有 (CORS) は HTTP ヘッダー ベースのメカニズムであり、サーバーは、ブラウザーがリソースの読み込みを許可する必要がある独自の配信元以外の配信元 (ドメイン、スキーム、またはポート) を示すことができます。

API Management 開発者ポータルの訪問者が API リファレンス ページの対話型テスト コンソールを使用できるようにするには、API Management インスタンスで API に対して CORS ポリシーを有効にします。 開発者ポータルのドメイン名がクロスドメイン API 要求の許可されたオリジンでない場合は、テスト コンソール ユーザーに CORS エラーが表示されます。

特定のシナリオでは、API に対して CORS ポリシーを有効にするのではなく、開発者ポータルを CORS プロキシとして構成できます。

適用対象: Developer | Basic | Standard | Premium

前提条件

API Management インスタンスに移動します。

  1. Azure portal で、[API Management サービス] を検索して選択します。

    [API Management サービス] を選択する

  2. [API Management サービス] ページで、ご自身の API Management インスタンスを選択します。

    API Management インスタンスを選択する

API に対して CORS ポリシーを有効にする

API Management インスタンス内のすべての API に対して CORS ポリシーを自動的に構成する設定を有効にすることができます。 CORS ポリシーを手動で構成することもできます。

Note

1 つの CORS ポリシーのみが実行されます。 複数の CORS ポリシーを指定した場合 (たとえば、特定の API レベルとすべての API レベル)、対話型コンソールが期待どおりに動作しないことがあります。

CORS ポリシーを自動的に有効にする

  1. API Management インスタンスの左側にあるメニューの [開発者ポータル] で、[ポータルの概要] を選択します。
  2. [CORS を有効にする] の下に、CORS ポリシー構成の状態が表示されます。 警告ボックスは、ポリシーが存在しないか、構成が正しくないことを示します。
  3. 開発者ポータルからすべての API に対して CORS を有効にするには、[CORS を有効にする] を選択します。

開発者ポータルで CORS ポリシーの状態を確認する場所を示すスクリーンショット。

CORS ポリシーを手動で有効にする

  1. 生成されたポリシー コードを表示するには、 [手動でグローバル レベルに適用する] リンクを選択します。
  2. API Management インスタンスの [API] セクションにある [すべての API] に移動します。
  3. Inbound processing セクションで </> アイコンを選択します。
  4. ポリシー エディターで、XML ファイルの <inbound> セクションにポリシーを挿入します。 <origin> の値が、開発者ポータルのドメインと一致していることを確認します。

注意

API(s) スコープではなく Product スコープで CORS ポリシーを適用し、API でヘッダーを介してサブスクリプション キー認証を使用する場合、コンソールは正しく動作しません。

ブラウザーは OPTIONS HTTP 要求を自動的に発行しますが、サブスクリプション キーを含むヘッダーがこの要求には含まれていません。 サブスクリプション キーがないため、API Management は OPTIONS 呼び出しを Product に関連付けることができず、したがって CORS ポリシーを適用できません。

回避策として、クエリ パラメーターでサブスクリプション キーを渡すことができます。

CORS プロキシ オプション

一部のシナリオ (たとえば、API Management ゲートウェイがネットワークで分離されている場合) では、API に対して CORS ポリシーを有効にするのではなく、開発者ポータルを CORS プロキシ自体として構成することを選択できます。 CORS プロキシは、対話型コンソールの API 呼び出しを、API Management インスタンス内のポータルのバックエンドを介してルーティングします。

Note

API がセルフホステッド ゲートウェイを介して公開されている場合、またはサービスが仮想ネットワーク内にある場合は、API Management 開発者ポータルのバックエンド サービスからゲートウェイへの接続が必要です。

CORS プロキシを構成するには、管理者として開発者ポータルにアクセスします。

  1. API Management インスタンスの [概要] ページで、[開発者ポータル] を選択します。 開発者ポータルが新しいブラウザー タブで開きます。
  2. 管理インターフェイスの左側のメニューで、[ページ]> [API>[詳細] を選択します。
  3. [API: 詳細] ページで、[操作: 詳細] ウィジェットを選択し、[ウィジェットの編集] を選択します。
  4. [CORS プロキシの使用] を選択します。
  5. ポータルに変更を保存し、ポータルを再発行します。

セルフホステッド開発者ポータルの CORS 構成

開発者ポータルをセルフホストする場合は、CORS を有効にするために次の構成が必要です。

  • 構成ファイルの backendUrl オプションを使用してポータルのバックエンド エンドポイントを指定します。 そうしないと、セルフホステッド ポータルでバックエンド サービスの場所が認識されません。

  • セルフホステッド ポータルがホストされている環境を指定して、セルフホステッド ポータル構成に配信元ドメインの値を追加します。 詳細情報

関連するコンテンツ

  • ポリシーを構成する方法の詳細については、ポリシーの設定または編集に関する記事を参照してください。
  • CORS ポリシーの詳細については、「CORS」ポリシー リファレンスを参照してください。