CORS Preflight request not working with Azure API Management

Question

I have 2 Azure Websites (ASP.NET MVC 5 and ASP.NET WebApi 2). The MVC website has some jQuery which tries to post CORS request to the WebApi. It works just fine if it connects directly to the WebApi. However it doesn't work when trying to connect through the API Management.

The error I got in Chrome is:

XMLHttpRequest cannot load https://XXXXXX.azure-api.net/api/search. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://YYYYYY.azurewebsites.net' is therefore not allowed access.

I ruled out the problem being with the WebApi config, because as I said it works directly.

Below is my policy:

<policies>
    <inbound>
        <cors>
            <allowed-origins>
                <origin>*</origin>
                <!-- allow any -->
            </allowed-origins>
            <allowed-headers>
                <header>accept</header>
                <header>accept-encoding</header>
                <header>access-control-request-headers</header>
                <header>access-control-request-method</header>
                <header>connection</header>
                <header>content-type</header>
                <header>host</header>
                <header>origin</header>
                <header>referer</header>
                <header>user-agent</header>
            </allowed-headers>
            <expose-headers>
                <header>access-control-allow-headers</header>
                <header>access-control-allow-origin</header>
                <header>cache-control</header>
                <header>content-length</header>
                <header>date</header>
                <header>expires</header>
                <header>pragma</header>
                <header>server</header>
                <header>set-cookie</header>
                <header>x-aspnet-version</header>
                <header>x-powered-by</header>
            </expose-headers>
        </cors>
    </inbound>
    <backend>
        <base />
    </backend>
    <outbound>
        <base />
    </outbound>
</policies>

Any ideas?

There is a typo in your allowed-headers/access-control-request-headersn Some people have experienced issues getting CORS working with mistyped headers stackoverflow.com/questions/26121824/… Is that just a typo in the SO question, or in your original policy? — Darrel Miller
Cheers, I fixed the type on the policy but didn't make any difference. :( — Adam Szabo
Are you also adding an Authorization header? I get this error using api apps with CORs. — ozkary
Any luck with this? I'm currently dealing with this issue myself, and haven't found much helpful on the web. — Steve Eggering
Same here. I have been struggling for a week and try everything I can search for on web. Now I totally get what CORS for and still I get 'No 'Access-Control-Allow-Origin' header is present' error with my angular localhost app. Very frustrating. — RocketsLee

Vitaliy Kurokhtin Vitaliy Kurokhtin · Accepted Answer · 2016-01-22T20:10:38

CORS policy intended use is for the cases when your backend does not support CORS. In that case you can put this policy in and it will reply to OPTION requests without forwarding them to your backend. And you can use this policy to decide which origins/headers/methods to process for CORS.

Alternatively, if your backend already supports CORS and you see no benefit in handling CORS flow on APIM level you could just proxy the entire flow. For that to happen you should remove CORS policy and create a new operation in your API in APIM with OPTIONS method, so that OPTIONS requests would be forwarded to backend normally.

CORS Preflight request not working with Azure API Management

1 Answers