DEV Community

Sanjeevi Subramani
Sanjeevi Subramani

Posted on • Originally published at lkgforit.com on

Adding CORS headers in API Management via Policy

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>

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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:

@(context.Request.Headers.GetValueOrDefault(Origin,))

Happy Coding :)

Discussion (0)