Azure APIM getting CORS error on API Post method

Question

I am trying to consume an POST API in my web application and getting error: Access to XMLHttpRequest at 'https://XXXXX' from origin 'http://localhost:3030' 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.

Below is the CORS setting in APIM at API level:

<policies>
<inbound>
    <base />
    <cors allow-credentials="true">
        <allowed-origins>
            <origin>http://localhost:3030/</origin>
            
        </allowed-origins>
        <allowed-methods preflight-result-max-age="300">
            <method>GET</method>
            <method>POST</method>
            <method>OPTIONS</method>
        </allowed-methods>
        <allowed-headers>
            <header>*</header>
        </allowed-headers>
    </cors>
</inbound>
<backend>
    <base />
</backend>
<outbound>
    <base />
</outbound>
<on-error>
    <base />
</on-error>

I am not sure what setting is wrong here. Quick help will be appreciated!!

Thanks in advance.

Request from http to https will cause mix content error and some clients get confused and show this as CORS error, try https to https and see if this will help to fix the issue, — Mohamad

Jason Pan Jason Pan · Accepted Answer · 2021-06-10T01:52:26

You should config CROS in both of your Azure app services and APIM.

Judging from your api settings, there should be no problem. Please check the cross-domain settings in your webapp.

For more details, you can refer below posts to locate your problems.

1. Failed to call APIs from web page behind Azure APIM due to CORS issues

2. Getting Access Control Allow Origin Error While Accessing Web Api hosted in AZURE RRS feed

Azure APIM getting CORS error on API Post method

1 Answers