Setting up CORS in Azure APIM policy

You can setup the CORS policy in Azure APIM to allow API requests from frontend apps like Angular, React, etc. Modern browsers refuse connection when there is no Cross-origin resource sharing (CORS)  in the API response header section. The API request will fail when invoked from the application through the browser. If you inspect the browser console you will see CORS error when allowed origin headers are not exposed from the API endpoints, see the picture below.

To allow calls from any domain, you can setup the CORS policy in APIM and expose the headers in the response that will allow you to complete the request with a successful response. In the following example, the API has been written using Azure Function App as a microservice. It connects to the MS SQL database. The database and the Function app are not accessible directly from the public domain. They are accessible through a subnet connected to the Azure API Management instance. The APIM also has an Application Gateway configured so every request comes through the Application Gateway.

You can add the CORS policy for each endpoint for the API. But it’s better to add on the global level if you want to have the same policy for all endpoints. I have added policy globally instead of each endpoints.

You can switch to code view to see the policy setup in XML format below. You can also restrict the allowed method to minimize security concerns. You can also add IP restrictions to allow request from specific IP address.

<policies>
    <inbound>
        <base />
        <set-backend-service backend-id="func-my-app-api" />
        <cors allow-credentials="false">
            <allowed-origins>
                <origin>*</origin>
            </allowed-origins>
            <allowed-methods>
                <method>GET</method>
                <method>POST</method>
            </allowed-methods>
            <allowed-headers>
                <header>*</header>
            </allowed-headers>
            <expose-headers>
                <header>*</header>
            </expose-headers>
        </cors>
    </inbound>
    <backend>
        <base />
    </backend>
    <outbound>
        <set-header name="X-Powered-By" exists-action="delete" />
        <set-header name="X-AspNet-Version" exists-action="delete" />
        <base />
        <find-and-replace from="https://func-my-app-api.azurewebsites.net" to="apim.yourdomain.com" />
    </outbound>
    <on-error>
        <base />
    </on-error>
</policies>