I built a simple demo cinema management application with React.js and Flask.
The React movies component in which all the the cinema movies ( Fetched from Flask ) are displayed, works just fine – as long as I access the React url from the same computer (http://localhost:3000/movies ).
When I try to access React from another computer in my network, using the source computer IP which in my case is 10.0.0.14 ( http://10.0.0.14:3000/movies ), although React is working, I can’t make axios API calls and I get the following error.
GET http://localhost:5000/movies net::ERR_CONNECTION_REFUSED
Uncaught (in promise) AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
xhr.js:220 GET http://localhost:5000/movies net::ERR_CONNECTION_REFUSED
Now, This is the part of my React code from which requests are made
useEffect(() =>
{
async function getMovies()
{
let resp = await axios.get("http://localhost:5000/movies/");
setPersons(resp.data);
}
getMovies()
},[])
This is my Flask code:
from flask import Flask
import json
from bson import ObjectId
from flask_cors import CORS
from routers.persons import persons
class JSONEncoder(json.JSONEncoder):
def default(self, obj) :
if isinstance(obj, ObjectId):
return str(obj)
return json.JSONEncoder.default(self,obj)
app = Flask(__name__)
CORS(app)
app.url_map.strict_slashes = False
app.json_encoder = JSONEncoder
app.register_blueprint(persons, url_prefix="/movies/")
app.run()
Can somebody tell me how to fix this and allow axios requests when accessing React from another device?
>Solution :
Check your API call of the react app. You are using localhost even you are doing the api call from a different host browser. Change the localhost to the api host ip then it will work.
Change this to http://localhost:5000/movies/ to http://<api-ip-address>:5000/movies/.