Adding CORS headers in API Management via Policy | API Management policy update | CORS header at policy level in api management

{tocify} $title={Table of Contents}

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

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 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 :)