Access-Control-Allow-Origin is added to the header when request is made from Python(Google Colab), but not when the request is made from ReactJS

Question

My app is structured as follows: React frontend -> Azure Api Management -> Flask backend.

The Flask app allows all origins.

app = Flask(__name__)
CORS(app, resources={r"/*": {"origins": "*"}})

The Azure Api Management inbound and outbound policy looks like this:

<policies>
    <inbound>
        <base />
        <set-backend-service id="apim-generated-policy" backend-id="webapp_test" />
        <cors allow-credentials="true">
            <allowed-origins>
                <origin>https://va-prod-dashboard.azurewebsites.net</origin>
                <origin>http://localhost:9000</origin>
                <origin>http://localhost:3000</origin>
            </allowed-origins>
            <allowed-methods>
                <method>GET</method>
                <method>POST</method>
            </allowed-methods>
        </cors>
    </inbound>
    <backend>
        <base />
    </backend>
    <outbound>
        <base />
    </outbound>
    <on-error>
        <base />
    </on-error>
</policies>

The issue started when I tried to make a POST request from the React frontend. When making the request from python(google colab), I printed the response header and it had Access-Control-Allow-Origin: *(all).

The React post request fails with: No 'Access-Control-Allow-Origin' header is present on the requested resource.

What is strange to me is that only post requests fail, only in javascript.

Does anybody have any idea what might be the culprit?

Thank you for taking the time to read this!

Answer 1

Thanks to Daniel W, for your valuable suggestion. Posting as an answer to help other community members.

You need to add <cors> directive also to <outbound>.

CORS are sent by the server, not by the client, pretty sure it's to do with the MS Proxy.

Please refer this Microsoft-Doc-CORS-APIM for more information.