CORS issue in Azure API Management

Question

I'm using Azure API management which internally access my python Flask web service. Azure API works good for GET operations. For POST, when I make jquery AJAX call, the request is converted into OPTIONS and the following error shows up

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://domain.com' is therefore not allowed access. The response had HTTP status code 500.

I have added the following policy for the Azure API,

<policies>
    <inbound>
        <cors>
            <allowed-origins>
                <origin>*</origin>
            </allowed-origins>
            <allowed-methods>
                <method>*</method>
            </allowed-methods>
            <allowed-headers>
                <header>*</header>
            </allowed-headers>
        </cors>
        <base />
    </inbound>
    <outbound>
        <base />
    </outbound>
</policies>

But still I'm facing the same issue.

The same error showed up when I directly make AJAX POST request to my python flask service and I fixed it by adding the following code in the flask,

@app.after_request
def after_request(response):
  response.headers.add('Access-Control-Allow-Origin', '*')
  response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization')
  response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE')
  return response

What should I change in Azure API management to get the POST operation working??

Sinusoidal

I have recently noticed CORS failures in my Azure api's too, as of today. Is this a recent problem for you, too? – Rosebay

We noticed them too, started yesterday. – Junejuneau

Yes. Very recent problem, wasted a whole day on this. Not expected from Microsoft – Sinusoidal

Answer 1

There was a CORS bug in the last release which is resolved now.

Auvil

Answer 2

Add below policy in API management -

<inbound>
    <cors>
        <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>
</inbound>

key Solution - Delete - base tag under inbound tag and save .

Fillister

Answer 3

In my test,I set the wildcards(*) in origin tag, and I reproduced your issue, then I tried to specify the URL in allow-origins tag to development environment as http://localhost:8801 instead of (*), and it posted through.

Here are my code snippets, for your information:

Police: <inbound> <cors allow-credentials="false"> <allowed-origins> <origin>http://localhost:8801</origin> </allowed-origins> <allowed-methods> <method>*</method> </allowed-methods> <allowed-headers> <header>*</header> </allowed-headers> </cors> <base /> </inbound>

JS code is the example shown on API management portal:

$(function() { $.ajax({ url: "https://garytest.azure-api.net/testpost/", beforeSend: function(xhrObj){ // Request headers xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","{subscription key}"); }, type: "POST", // Request body data: {name:'gary',sex:'male'}, }) .done(function(data) { alert("success"); }) .fail(function() { alert("error"); }); });

Flask service is simple: @app.route('/post',methods=['POST']) def post(): name = request.form['name'] sex = request.form['sex'] return "post name: "+name+", sex:"+sex

Please try to specify origin, and test again.

Aminta

Answer 4

Temp ignore cors check with this config

<cors allow-credentials="false">
        <allowed-origins>
            <!-- Localhost useful for development 
            <origin>http://localhost:4200</origin>-->
            <origin>*</origin>
        </allowed-origins>
        <allowed-headers>
            <!-- Examples below show Azure Mobile Services headers -->
            <header>*</header>
        </allowed-headers>
        <expose-headers>
            <!-- Examples below show Azure Mobile Services headers -->
            <header>*</header>
        </expose-headers>
    </cors>

Enplane