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

Question

I am using Azure APIM , my APIs are hosted on Azure app service coded by .net core . I have configed my apis behind APIM . However , when I tried to call my APIs , I got this issue :

Access to fetch at '' 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.

This is the js code that I call my API :

var url='<the url of my api in APIM>';
fetch(url, {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
        "Seckey":"xxxxxx"
    },
    body: '<some json content>'
    }).then(function(res) {
        console.log("Response succeeded?", JSON.stringify(res.status));
        console.log(JSON.stringify(res));
    }).catch(function(e) {
    console.log("fetch fail", JSON.stringify(e));
});

I know this is a CORS issue , and I have configed CORS policy in APIM based on this doc : https://docs.microsoft.com/en-us/azure/api-management/api-management-cross-domain-policies#CORS

However, it did not solve this issue . So did I miss something ?

Thanks in advance.

Answer 1

As @Thiago Custodio said, you should config CROS in both of your Azure app services and APIM.

Btw,if you have enabled CROS for your Azure app service , pls check you have configed CORS correctly in your APIM, based on your request, I noticed that you have a custom header : Seckey, have you configed it in your CORS policy?

If not , pls try the CORS policy below, or you will meet CORS issue:

<cors >
    <allowed-origins>
        <origin>http://localhost:8080/</origin> 
    </allowed-origins>
    <allowed-methods preflight-result-max-age="300">
        <method>POST</method>
    </allowed-methods>
    <allowed-headers>
        <header>Content-Type</header>
        <header>Seckey</header>
    </allowed-headers>
</cors>

Hope it helps.

Answer 2

Where have you placed your policy? CORS will only work at the API and Operation level and not the product level. See this blog for the scope of the policy in APIM. https://blogs.perficient.com/2016/12/28/policy-scope-in-azure-api-management/

This is an extract from an example of Azure APIM CORS policy that works.

      <inbound>
            </base>
            <cors allow-credentials="true">
                <allowed-origins>
                    <origin>http://localhost/</origin>
                </allowed-origins>
                <allowed-methods preflight-result-max-age="300">
                    <method>GET</method>
                    <method>POST</method>
                </allowed-methods>
                <allowed-headers>
                    <header>Authorization</header>
                    <header>Ocp-Apim-Subscription-Key</header>
                    <header>content-type</header>
                </allowed-headers>
            </cors>
        </inbound>
        
        <outbound>
            <base />
            
            <!--CORS-->
            <set-header name="Access-Control-Allow-Credentials" exists-action="override">
                <value>true</value>
            </set-header>
    
            <set-header name="Access-Control-Allow-Headers" exists-action="override">
                <value>*</value>
            </set-header>
        </outbound>

Some documents suggest to add this header in the outbound too.

    <set-header name="Access-Control-Allow-Origin" exists-action="override">
                    <value>@(context.Request.Headers.GetValueOrDefault("Origin",""))</value>
                </set-header>