Why is my APIM CORS policy blocking requests made from browser despite being fully open?

Question

My endpoint policy xml is

<policies>
    <inbound>
        <base />
        <cors>
            <allowed-origins>
                <origin>*</origin>
            </allowed-origins>
            <allowed-methods preflight-result-max-age="300">
                <method>*</method>
            </allowed-methods>
            <allowed-headers>
                <header>*</header>
            </allowed-headers>
        </cors>
    </inbound>
    <backend>
        <base />
    </backend>
    <outbound>
        <base />
    </outbound>
    <on-error>
        <base />
    </on-error>
</policies>

but when I make a request from the browser (app running at http://localhost:8080/) I get the error

Access to fetch at 'https://<manager-name>.azure-api.net/<address>/<address>' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I'm using fetch to make the request and I'm including the ocp-apim-subscription-key header.

Any help much appreciated :)

Answer 1

Hey Mayank, thanks for coming back to me.

I figured out what the problem was. I needed to implement the policy at the All APIs level, I was adding it to individual endpoints. I'll attach a screenshot to explain.

Answer 2

Hi @Mark Potter

Welcome to Microsoft Q&A! Thanks for posting the question.

You can refer to CORS issue and it looks like you are running it from self hosted endpoint. Please confirm if my understanding is correct. Can you try replacing the allowed-origins from '*' to the below origin after updating your APIM name and see if it helps you with the self hosted endpoint.

    <allowed-origins>  
                     <origin>https://{yourAPIMname}.developer.azure-api.net</origin>  
                     <origin>http://localhost:8080</origin>  
    </allowed-origins>