[この API を試す] パネルで不明なエラーが発生しました

Apigee Edge のドキュメントを表示しています。
Apigee X のドキュメントに移動します。 情報

症状

統合デベロッパー ポータルからの API 呼び出しが失敗し、[この API を試す] パネルに Unknown Error または空のレスポンスが表示されます。

エラー メッセージ

統合ポータルで API リクエストに対して空のレスポンスまたは次のエラー メッセージが表示されることがあります。

Unknown Error

[デベロッパー ツール > コンソール] タブに、次のエラーが表示されます。

Access to XMLHTTPRequest at 'API_URL' from origin 'URL_of_Integrated_DevPortal'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is
present on the requested resource.

[デベロッパー ツール] > [コンソール] タブに表示される一般的なエラー メッセージは次のとおりです。

考えられる原因

原因: 処理されていないポリシー エラー

診断

1. 問題は 2XX 以外のレスポンスが想定される場合にのみ発生することを確認します。
2. リクエストが失敗した場合は、プロキシ フローにポリシーがあることを確認します。
3. リクエストをトレースし、 continueOnError="false" を含むポリシーが失敗してエラーを発生させているかどうかを確認します。
1. 実行されている場合は、エラー レスポンス フローで AssignMessage CORS ポリシーが実行されたかどうかを確認します。
2. そうでない場合は、それがこの問題の原因です。
   これは、 continueOnError="false" 要素を含むポリシーが失敗すると、リクエストがエラー レスポンス フローに入るためです。エラー レスポンス フローに明示的な障害処理がない場合は、ポリシーに対応するデフォルトのエラー レスポンスが返送されます。このエラー レスポンスには CORS ヘッダーがありません。その結果、統合デベロッパー ポータルからの API 呼び出しが Unknown error で失敗します。

次のスクリーンショットは、エラー メッセージの例と成功メッセージの例を示しています。

統合ポータルの [この API を試す] パネルとプロキシの [トレース] ウィンドウに表示されるエラー メッセージの例:

統合ポータルの [この API を試す] パネルとプロキシの [トレース] ウィンドウに表示される成功メッセージの例:

解決策

1. デフォルトのエラー メッセージに依存するのではなく、エラー レスポンスを処理するために 障害ルールを実装する必要があります。適切なヘッダーを含む AssignMessage CORS ポリシーを含め、 FaultRule で呼び出します。
2. 障害ごとに障害ルールを定義することが現実的でない場合があるため、AssignMessage CORS ポリシーを実行するデフォルトの障害ルールを実装できます。

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<ProxyEndpoint name="proxy-endpoint-name">
    <Description/>
    <!-- Add a default fault rule to add CORS -->
    <DefaultFaultRule name="fault-rule">
        <Step>
            <Name>add-cors</Name>
        </Step>
    </DefaultFaultRule>
    <FaultRules/>
    <!--
    <Flows />
    Rest of the proxy definition
    -->
</ProxyEndpoint>

原因: Access-Control-Allow-Origin の値が複数ある

診断

1. トレース セッションで Access-Control-Allow-Origin ヘッダーの値を確認します。
2. Access-Control-Allow-Origin ヘッダーでは、設定できる値は 1 つだけです。複数の値を設定すると、CORS の問題が発生し、デベロッパー ポータルでレスポンスがレンダリングされなくなります。
3. トレースの Access-Control-Allow-Origin ヘッダーの値が
   *,*
のようになっている場合、ターゲット サーバーと AssignMessage CORS ポリシーの両方がその値を設定しています。
4. これは、ユーザーがポリシーで Access-Control-Allow-Origin に <Add> element を使用した場合や、バックエンド自体が複数の値を設定している場合に発生する可能性があります。

Access-Control-Allow-Origin が *,* に等しい例:

Access-Control-Allow-Origin が * に等しい例:

<Add> を使用する例:

<Set> を使用する例:

解決策

1. 推奨される方法は、Access-Control-Allow-Origin に <Set> element（ <Add> element ではなく）を使用することです。使用できる値は 1 つのみです。
2. または、 AssignMessage CORS ポリシーまたはターゲット サーバーのいずれか 1 か所でのみ Access-Control-Allow-Origin ヘッダーを設定します。

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<AssignMessage async="false" continueOnError="false" enabled="true" name="set-cors">
    <DisplayName>Set CORS</DisplayName>
    <FaultRules/>
    <Properties/>
    <Set>
        <Headers>
            <Header name="Access-Control-Allow-Origin">*</Header>
        </Headers>
    </Set>
    <IgnoreUnresolvedVariables>true</IgnoreUnresolvedVariables>
    <AssignTo createNew="false" transport="http" type="response"/>
</AssignMessage>

Apigee サポートのサポートが必要な場合は、診断情報の収集が必要な場合をご覧ください。

診断情報の収集が必要な場合

次の診断情報を収集して、Apigee Edge サポートにお問い合わせください。

• 組織名
• 環境名
• API プロキシ名
• エラーを再現するために使用した完全な curl コマンド
• API リクエストのトレース ファイル
• ターゲット/バックエンド サーバーからのレスポンスの完全な出力とペイロードのサイズ