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