Enable CORS policies for Azure API Management

Ilias el Matani

Introduction

While developing a front-end application recently, I ran into a CORS issue when interfacing with an API. The available documentation, especially from a code editor's perspective, was somewhat lacking and not comprehensive. This article walks through the steps to set up CORS policies in APIM and provides guidance on best practices.

The need for CORS

In a web environment, browsers enforce the same-origin policy to safeguard user data against malicious web pages. This means that web pages from one origin cannot make requests to another origin without the other origin's consent. The consent is provided using CORS headers. When developing locally or integrating systems with diverse origins, setting up CORS becomes paramount.

Setting up CORS in Azure API Management

Navigate to Azure API Management Service

  • Sign in to the Azure portal.
  • Search and select your API Management instance.

Accessing API

  • Within the left-hand sidebar, click on APIs.
  • You'll see a list of your APIs. Choose the one you want to set the CORS policy for.

Dive into the API Operations

  • After selecting the API, you'll be directed to the API's dashboard.
  • Find the Design section and click on Operations. You can set CORS policies for specific operations or for all operations.

Adding CORS Policy

  • With the desired operation selected, click on the Inbound processing tab.
  • Click on + Add policy.
  • From the policy templates presented, select CORS.

Configuring the CORS Policy

  • Within the policy configuration, you'll see multiple fields:
  • Allowed Origins: Specify the origins that can access your API. For instance, https://example-frontend-app.com.
  • Allowed Methods: Define which HTTP methods (GET, POST, PUT, etc.) are allowed.
  • Allowed Headers: Specify which HTTP headers can be used when making the actual request.
  • Exposed Headers: Declare the headers that the browser should have access to.
  • Credentials: If true, the browser sends credentials (like cookies) with the request.
  • Save Changes: after configuring the policy as per your requirements, ensure to click on Save to commit the changes.

Security note

  • Be explicit: instead of using wildcards (*), always specify exact origins, methods, and headers. This ensures that you only allow what's necessary.
  • Avoid Allowing Credentials: unless necessary, avoid setting allow-credentials to true, as it can expose sensitive data.
  • Regular audits: periodically review and audit your CORS settings to ensure they align with your evolving needs and potential security threats.

Conclusion

Enabling CORS in Azure API Management is essential for both functionality and security. By adhering to the steps and best practices shared, you can efficiently cater to diverse origins while safeguarding your API endpoints.