Adding CORS headers in API Management via Policy
Published: 2022-07-05 10:51:29

---
title: Adding CORS headers in API Management via Policy
published: true
date: 2021-03-14 17:00:01 UTC
tags: 
canonical_url: https://lkgforit.com/adding-cors-headers-in-api-management-via-policy-880d6c1fc9c3
---

Adds cross-origin resource sharing (CORS) support to an operation or an API to allow cross-domain calls from browser-based clients.

[Azure API Management cross domain policies | Microsoft Docs](https://docs.microsoft.com/en-us/azure/api-management/api-management-cross-domain-policies)

The `cors` policy adds cross-origin resource sharing (CORS) support to an operation or an API to allow cross-domain calls from browser-based clients.

CORS allows a browser and a server to interact and determine whether or not to allow specific cross-origin requests (i.e. XMLHttpRequests calls made from JavaScript on a web page to other domains). This allows for more flexibility than only allowing same-origin requests but is more secure than allowing all cross-origin requests.

You need to apply the CORS policy to enable the interactive console in the developer portal. Refer to the [developer portal documentation](https://docs.microsoft.com/en-us/azure/api-management/api-management-howto-developer-portal#cors) for details.

## Policy statement

XMLCopy

```
<cors allow-credentials="false|true" terminate-unmatched-request="true|false">
    <allowed-origins>
        <origin>origin uri</origin>
    </allowed-origins>
    <allowed-methods preflight-result-max-age="number of seconds">
        <method>http verb</method>
    </allowed-methods>
    <allowed-headers>
        <header>header name</header>
    </allowed-headers>
    <expose-headers>
        <header>header name</header>
    </expose-headers>
</cors>

```

## Example

This example demonstrates how to support pre-flight requests, such as those with custom headers or methods other than GET and POST. To support custom headers and additional HTTP verbs, use the `allowed-methods` and `allowed-headers` sections as shown in the following example.

XMLCopy

```
<cors allow-credentials="true">
    <allowed-origins>
        <!-- Localhost useful for development -->
        <origin>http://localhost:8080/</origin>
        <origin>http://example.com/</origin>
    </allowed-origins>
    <allowed-methods preflight-result-max-age="300">
        <method>GET</method>
        <method>POST</method>
        <method>PATCH</method>
        <method>DELETE</method>
    </allowed-methods>
    <allowed-headers>
        <!-- Examples below show Azure Mobile Services headers -->
        <header>x-zumo-installation-id</header>
        <header>x-zumo-application</header>
        <header>x-zumo-version</header>
        <header>x-zumo-auth</header>
        <header>content-type</header>
        <header>accept</header>
    </allowed-headers>
    <expose-headers>
        <!-- Examples below show Azure Mobile Services headers -->
        <header>x-zumo-installation-id</header>
        <header>x-zumo-application</header>
    </expose-headers>
</cors>

```

The **important** part in the above policy update is to add only one origin in the response headers instead of returning all allowed origins which will cause error in client browser side with error _CORS origin should contain only one header_.

For the above issue we must add following outbound policy:

> <outbound> <base /> <set-header name=Access-Control-Allow-Origin exists-action=override> <value>@(context.Request.Headers.GetValueOrDefault(Origin,))</value> </set-header> </outbound>

Happy Coding :)