Question

127.0.0.1:5000 ERR_CONNECTION_REFUSED from react app but curl and browser works

Hi,

I have a droplet with a react app and a flask server (uwsgi). React app is accessible via http://server_ip:3000/ Flask Server is accessible via http://server_ip:5000/

My ReactApp is fetching data from my flask server via http://127.0.0.1:5000 as they are both hosted on the same server.

curl http://127.0.0.1:5000 from the server works perfectly.

However, when accessing the react app, it is showing 127.0.0.1:5000 ERR_CONNECTION_REFUSED.

No firewall (ufw) has been set-up.

Running both app via systemd via the following comment: React: /usr/bin/serve -s /path/to/build -l 3000 Flask server: /path/to/project/venv/bin/uwsgi --ini=uwsgi.ini --http :5000

I have tried replacing 127.0.0.1 with 0.0.0.0 and I have tried changing the port.


Submit an answer

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Answer

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in Q&A, subscribe to topics of interest, and get courses and tools that will help you grow as a developer and scale your project or business.

Hi there @fabdarice,

There are a couple of solutions that I could suggest:

  • Use Nginx reverse proxy to proxy

What you could do is set up Nginx as a reverse proxy and proxy the traffic from your_public_ip/api to http://localhost:5000/, that way the 5000 port would not have to be exposed externally.

Then you will need to configure your React app so it connects to your_public_ip/api instead of `http://localhost:5000/.

  • Change your React app to connect to http://your_public_ip:5000 instead of http://127.0.0.1:5000/

It sounds like that in your React app you’ve specified your Flask URL as http://127.0.0.1:5000/, so when you access the React app via your browser, it tries to connect to port 5000 on your PC rather than the server IP address.

To fix that without Nginx proxy, you need to change the reference to your Flask app in your React app so that it points to http://your_public_ip:5000 instead of http://127.0.0.1:5000/. And as you mentioned make sure that Flask is binding on 0.0.0.0 rather than localhost.

Also, can you try running the following command to make sure that both services are listening as expected on the correct ports:

  1. sudo netstat -plant

Let me know how it goes! Regards, Bobby