create react app proxy is not working using a different domain api

Question

My app is running on localhost: 3000

I am trying to call an API from a different domain "https://redcap-internal.indocresearch.org/api/" inside my app.

I added a proxy in the package.json file of my react app like:

"proxy": "https://redcap-internal.indocresearch.org/api/",

I am using axios to call the API and my code is like the below:

function createRedCapRecordAPI(containerGUID) {
    return axios({
        url: "https://redcap-internal.indocresearch.org/api/",
        method: "POST",
        data: {
            token: REDCAP_TOKEN,
            content: "record",
            format: "json",
            type: "flat",
            overwriteBehavior: "normal",
            forceAutoNumber: false,
            data: [{ record_id: containerGUID }],
        },
    });
};

I am still getting an error from the broswer says

Access to XMLHttpRequest at 'https://redcap-internal.indocresearch.org/api/' from origin 'http://localhost:3000' has been blocked by CORS policy:

Anyone knows is there anything wrong?

Answer 1

Allowing cors headers, like Access-Control-Allow-Origin and Access-Control-Allow-Headers should be added on this https://redcap-internal.indocresearch.org/api/ domain side. You cannot fix it only on your side