Featured AI Products
Compute
Build, deploy, and scale cloud compute resources
Containers and Images
Safely store and manage containers and backups
Managed Databases
Fully managed resources running popular database engines
Management and Dev Tools
Control infrastructure and gather insights
Networking
Secure and control traffic to apps
Security
Help protect your account and resources with these security features
Storage
Store and access any amount of data reliably in the cloud
Browse all products
AI/ML
CMS
Data and IoT
Developer Tools
Gaming and Media
Hosting
Security and Networking
Startups and SMBs
Web and App Platforms
See all solutions
Community
Documentation
Developer Tools
Get Involved
Utilities and Help
Become a Partner
Marketplace
Pricing

- Community
- DigitalOcean
- Community
- DigitalOcean

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

Posted on November 14, 2020

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.

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!

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.

Bobby

November 16, 2020

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:

sudo netstat -plant

Let me know how it goes! Regards, Bobby

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

View all products

Start building today

From GPU-powered inference and Kubernetes to managed databases and storage, get everything you need to build, scale, and deploy intelligent applications.