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/");
      setMovies;
    }
    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?

CodePudding user response：

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/.