【Microsoft Azure】localhostからAPI Managementに登録したAPIを呼び出すとCORSエラーが発生する時の対処法

こんばんは。今日は、Microsoft AzureのAPI Managementに関するトラブルシューティングです。(エラー自体は、API ManagementのAPIに限らず一般的なものですが、解決するための設定方法などはAPI Management固有の手順になります)

解決に時間がかかってしまいましたがCORSをちゃんと理解する良い機会になりました。

それでは早速参ります。

Contents

問題

開発しているReact + TypeScriptのWebアプリケーションを、デバッグのためにローカルサーバで起動したときに、アプリからAPI Management上に登録したAPIを呼び出すとCORSエラーが発生してしまいました。これを正常に実行できるようにする必要がありました。

CORSエラーが発生しているかどうかは、ブラウザの開発者ツールから確認できます。

さらに、Consoleタブから、エラーの詳細を確認できます。

Access to fetch at 'APIのURL' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

CORSとは?

CORSについてはこちらの記事にまとめたので、よろしければご参照ください。

問題の解消方法

エラー内容を改めてみると、preflight requestのレスポンスヘッダにAccess-Control-Allow-Originヘッダがないよ、と怒られています。

これはAPI Management側でCORSを実現するための設定が不足しているために発生しています。

API Management側では、以下ドキュメントの通りCORSを利用する場合追加の設定が必要ですので、こちらに沿って設定を進めていきます。

https://docs.microsoft.com/ja-jp/azure/api-management/api-management-cross-domain-policies

以下の通り、API ManagemtnのInbound processingのルールを編集します。

以下のように、<cors>から始まるセクションを追加します。

ここで1点注意なのは、<base />よりも前に入れる、ということです。API managementのこれらのpolicyは、上から順に評価されます。理由はよく理解できていませんが、<base/>を先に入れてしまうと、CORSエラーが発生したままになってしまいました。

    ・・・・
        <inbound>
        <rewrite-uri template="XXXX" />
        <set-backend-service id="apim-generated-policy" backend-id="XXXXX" />
        <cors>
            <allowed-origins>
                <origin>http://localhost:3000</origin>
            </allowed-origins>
            <allowed-methods preflight-result-max-age="300">
                <method>*</method>
            </allowed-methods>
            <allowed-headers>
                <header>*</header>
            </allowed-headers>
        </cors>
        <base />
    </inbound>
       ・・・・

これだけでOK。

Preflightも正式なfetch (POST)リクエストも成功するようになりました。

以上、最後まで読んでいただきありがとうございました。

本記事がお役に立ちましたら、下のいいねをポチッていただけますと励みになります!

それでは!

この記事を気に入っていただけたらシェアをお願いします!
ABOUT US
Yuu113
初めまして。ゆうたろうと申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。 日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。