I have created a REST Endpoint in python application & it works fine when called from the browser. However, when I am trying to consume it in React JS application, it gives error on console.

I tried various ways for calling it as below.

1. Plain Old Javascript

        var request = new XMLHttpRequest();
        request.open("GET", "http://127.0.0.1:5000/countries", true);
        request.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
        request.send(data);

Error in console: On last line of above code, getting :

"Failed to load resource: net::ERR_FAILED"

2. Fetch method in REACT

fetch(apiUrl)
            .then((response) => response.json())
            .then((data) => console.log("This is your data", data));

Error in console: On last line of above code, getting :

"Failed to load resource: net::ERR_FAILED"

"Uncaught (in promise) TypeError: Failed to fetch

3. Axios :

axios.get("http://127.0.0.1:5000/countries")
            .then(res => {
                const responseData = res.data;
                console.log("responseData is : ", responseData);
            });

Error in console :

Uncaught(in promise). -> AxiosError -> Network error

Axios Error snapshot

Is there any issue with network/proxy settings or any library?

I need to make GET requests first, then POST requests as well. Please suggest with an example.