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

Anant 60 Reputation points
2023-08-22T06:42:04.51+00:00

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.

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

Accepted answer
  1. navba-MSFT 27,550 Reputation points Microsoft Employee Moderator
    2023-08-22T07:24:40.0633333+00:00

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

    enter image description here

    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.


0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.