I have a very simple React app in which I am trying to make an api call to my Flask API that is hosted on localhost:5000. Here is the fetch method:
//Fetch all forms from database
useEffect(() =>{
setIsLoading(true);
fetch('/api/forms').then(response =>{
if(response.ok){
return response.json();
}
}).then(data => console.log(data));
}, []);
I also added this line to my package.json which a lot of people recommend: "proxy": "http://localhost:5000/",.
I have also tried fetch('http://MY-IPV4-ADDRESS:5000/forms') and fetch('localhost:5000/forms') which did not work.
The error in the browser console simply reads "Failed to load resource: net::ERR_CONNECTION_REFUSED"
If I simply open a web browswer and navigate to localhost:5000/forms I get the proper response including all form data.
I then tried fetch('http://127.0.0.1:5000/forms') which gives me a 200 response from the API which usually means it was successful, but in the browser console says "Access to fetch at 'http://127.0.0.1:5000/forms' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."
I also have a React Native app which makes the very same api call like this:
//Fetch all formsfrom database
useEffect(() =>{
setIsLoading(true);
fetch('http://10.0.2.2:5000/forms').then(response =>{
if(response.ok){
return response.json();
}
}).then(data => setFullData(data)).then(setIsLoading(false));
}, []);
Which I have tried to no avail despite that this works fine in the React Native application.
This is the file structure of the project just to give you an idea of where everything is:
What am I doing wrong?
