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!

I think you need to add that `` directive also to `` or try what's in that link https://learn.microsoft.com/en-us/azure/api-management/api-management-cross-domain-policies#AllowCrossDomainCalls — Daniel W., Apr 20 '22 at 15:17
Does this answer your question? [No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API](https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe) — Ecstasy, Apr 21 '22 at 04:46
You can refer to [No 'Access-Control-Allow-Origin' header is present on the requested resource](https://stackoverflow.com/questions/65644658/no-access-control-allow-origin-header-is-present-on-the-requested-resource-fl), [React component has been blocked by CORS policy: No 'Access-Control-Allow-Origin'](https://stackoverflow.com/questions/58403651/react-component-has-been-blocked-by-cors-policy-no-access-control-allow-origin) and ['Access-Control-Allow-Origin' issue](https://stackoverflow.com/questions/41497674/access-control-allow-origin-issue-when-api-call-made-from-react-isomorphic-ap) — Ecstasy, Apr 21 '22 at 04:48
CORS are sent by the server, not by the client, pretty sure it's to do with the MS rproxy — Daniel W., Apr 21 '22 at 09:41

score -1 · Accepted Answer · answered May 04 '22 at 13:40

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.

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

1 Answers1