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

Mark Potter 101 Reputation points
2021-01-21T10:26:50.953+00:00

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

Azure API Management
Azure API Management
An Azure service that provides a hybrid, multi-cloud management platform for APIs.
1,797 questions
0 comments No comments
{count} votes

Accepted answer
  1. Mark Potter 101 Reputation points
    2021-01-21T12:18:05.627+00:00

    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.59192-screenshot-2021-01-21-at-121243.png

    1 person found this answer helpful.

1 additional answer

Sort by: Most helpful
  1. MayankBargali-MSFT 69,421 Reputation points
    2021-01-21T11:33:43.94+00:00

    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>  
    
    0 comments No comments