Enabling CORS on Azure APIM

Before we start on How to enable CORS in Azure API management service, let’s discuss the Azure APIM briefly –

What is Azure API Management?

Azure API Management is a comprehensive platform provided by Microsoft Azure that allows organizations to create, publish, secure, and analyze APIs. Whether you’re exposing APIs to external developers or managing internal APIs within your organization, Azure APIM simplifies the process and offers a range of features to ensure your APIs are both accessible and secure.

Key Features of Azure APIM:

1. API Gateway: Azure APIM acts as a gateway between your APIs and consumers. It handles requests, routing, and caching, improving API performance and reliability.

2. Security and Authentication: Secure your APIs with authentication, authorization, and OAuth support. Set up rate limiting and IP filtering to protect against abuse.

3. Developer Portal: Provide a developer-friendly portal where external developers can discover and consume your APIs. Publish documentation, code samples, and interactive API testing tools.

4. Analytics and Monitoring: Gain insights into API usage with detailed analytics and monitoring. Track performance, errors, and usage patterns to make data-driven decisions.

5. Transformation and Composition: Modify API requests and responses on the fly with policies. Compose APIs by combining multiple backend services into a single API.

Now we have to discuss about CORS error and how to enable CORS in the Azure API management service

Below error we face if CORS is not enabled in Azure APIM –

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://domain.com' is therefore not allowed access.

Enabling Cross-Origin Resource Sharing (CORS) in Azure API Management (APIM) is essential for allowing web applications hosted on different domains to access your APIs securely. CORS configuration helps you define which origins are allowed to make requests to your APIs. In this blog post, we’ll guide you through the process of enabling CORS in Azure APIM.

What is CORS?

CORS is a security feature implemented by web browsers to prevent web pages from making requests to a different domain than the one that served the web page. When your API is hosted on a different domain than your web application, you need to configure CORS to allow requests from the web application’s domain.

When I added the API in Azure API management service, the fronted request was blocked by CORS policy as below –

Enabling CORS in Azure API Management:

Follow the below steps to enable CORS in Azure API Management:-

Step 1: Sign in to the Azure Portal

Step 2: Open Your API Management Service

In the Azure portal, navigate to your API Management service.

Step 3: Configure the CORS Policy

In the left-hand menu of your API Management service, click on “APIs” to list your APIs.

Select the API for which you want to enable CORS.

In the selected API, Click on all operations –> then click on the Add policy tab inside the inbound processing rules, As below :

Note:- make sure you have added policy on All operations so that the policy will be applicable on all operations of the selected API.

After clicking on the Add Policy button, Select the CORS policy

Fill in the details in CORS policy: In my case, I have selected “*”. Click the “Save” button to apply the CORS configuration.

Step 4: Save and Publish Changes: After you Save the policy, the policy looks like as below –

Note: Please make sure the CORS policy has to be added prior base policy

After configuring CORS, make sure to save your API Management configuration changes. If you’ve made other changes, don’t forget to publish them to make them active.

You can also add manually below xml code block in the inbound processing rule –

        <cors allow-credentials="false">
            <allowed-origins>
                <origin>*</origin>
            </allowed-origins>
            <allowed-methods preflight-result-max-age="300">
                <method>*</method>
            </allowed-methods>
            <allowed-headers>
                <header>*</header>
            </allowed-headers>
            <expose-headers>
                <header>*</header>
            </expose-headers>
        </cors>
        <base />

Step 5: Test CORS Configuration

To ensure that CORS is correctly configured, test your API from a web application hosted on one of the allowed domains. You should now be able to make cross-origin requests to your API without encountering CORS issues.

Conclusion:

Enabling Cross-Origin Resource Sharing (CORS) on Azure API Management Service is a crucial step in ensuring that your APIs can be securely accessed by client applications from different domains. By following the steps in this blog, you can enhance the security and accessibility of your APIs, making them more user-friendly and developer-friendly while maintaining robust security measures

Blog Pundits: Mehul Sharma and Sandeep Rawat

OpsTree is an End-to-End DevOps Solution Provider.

Connect with Us