Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

Question

Hi,

I have onboard API using swagger file in APIM . and configure CORS policy as below -

        <cors allow-credentials="false">
            <allowed-origins>
                <origin>*</origin>
            </allowed-origins>
            <allowed-methods preflight-result-max-age="300">
                <method>*</method>
            </allowed-methods>
            <allowed-headers>
                <header>*</header>
            </allowed-headers>
            <expose-headers>
                <header>*</header>
            </expose-headers>
        </cors>

But when I hit API from frontend , I am getting CORS error in browser console as below

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <api_url>. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

Answer 1

@Anant Welcome to Microsoft Q&A Forum, Thank you for posting your query here!

I see that you are facing a CORS error when trying to access an API from the frontend. The error message indicates that The Same Origin Policy disallows reading the remote resource (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200. The customer has already configured the CORS policy in Azure API Management, but the error persists.

Plan 1: Please add a CORS policy at the All Operations scope for your API that looks like following:

         <cors allow-credentials="false">
            <allowed-origins>
                <origin>*</origin>
            </allowed-origins>
            <allowed-methods preflight-result-max-age="300">
                <method>*</method>
            </allowed-methods>
            <allowed-headers>
                <header>*</header>
            </allowed-headers>
            <expose-headers>
                <header>*</header>
            </expose-headers>
        </cors>
     <base />

You shouldn't remove <base/> call as it will prevent calls to forward-request and request will never be forwarded to backend. You should ensure that this CORS policy is the very first policy in the <inbound> section at the "All Operations" scope for this API. The <base/> call should be AFTER the CORS policy. see below:

Plan 2: Check the API response headers to ensure that the 'Access-Control-Allow-Origin' header is included. You can use a tool like Fiddler or the browser developer tools (F12) to inspect the API response headers. And then confirm if the 'Access-Control-Allow-Origin' header is included in the response.

Please let me know if you have any further questions or concerns. I would be happy to help.

** Please do not forget to "Accept the answer” and “up-vote” wherever the information provided helps you, this can be beneficial to other community members.