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

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

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

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

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

前提条件

• 次のクイック スタートを完了する: Azure API Management インスタンスを作成する

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

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

   

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

   

API の CORS ポリシーを有効にする

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

注

CORS ポリシーは 1 つだけ実行されます。 複数の CORS ポリシー (API レベルやすべての API レベルなど) を指定した場合、対話型コンソールが期待どおりに動作しない可能性があります。

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

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

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

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

注

API スコープではなく製品スコープに CORS ポリシーを適用し、API がヘッダーを介してサブスクリプション キー認証を使用している場合、コンソールは機能しません。

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

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

カスタム ドメイン名の CORS 構成

開発者ポータルの カスタム ドメイン を構成し、閲覧者が API リファレンス ページでテスト コンソールを使用できるようにする場合は、カスタム開発者ポータルのドメイン名に対して CORS を有効にしてください。

カスタム ドメインを構成するときに、CORS ポリシーでカスタム開発者ポータル ドメインの配信元を追加する設定を有効にすることができます。 既定のドメインに対して CORS が既に有効になっている場合、両方の配信元が CORS ポリシーに含まれます。 CORS ポリシー設定はいつでも変更できます。

CORS プロキシ オプション

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

注

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

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

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

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

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

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

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

関連コンテンツ

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