[FIXED] Why do I keep getting the axios error in my Django React app on Heroku?

Issue

I developed a simple Django React application and deployed on to heroku:

https://friendly-interview-duck.herokuapp.com/

Even though the backend and frontend connection was working correctly via axios in local, I started getting the infamous

GET http://127.0.0.1:8000/api/questions/ net::ERR_CONNECTION_REFUSED

error in the deployed app.

Obviously, I thought this had something to do with hosts/CORS. I initially had

CORS_ALLOWED_ORIGINS = [
'https://friendly-interview-duck.herokuapp.com', 
'https://127.0.0.1:8000.com', 
'https://localhost.com'
]

ALLOWED_HOSTS = [
'https://friendly-interview-duck.herokuapp.com', 
'https://127.0.0.1:8000.com', 
'https://localhost.com']

in my setting.py but getting this error, I changed it to:

CORS_ORIGIN_ALLOW_ALL = True
ALLOWED_HOSTS = ['*']

to experiment. And guess what? I am still getting connection refused error! I cleared the cash multiple times and even browsed into the deployed url from another computer and the error still exists.

As a note, I know many people miss '/' at the end of their urls which causes this but I have a '/' at the end of my request urls as well so that can't be the problem.

What am I missing here?

https://github.com/gokceozer1/friendly-interview-duck.git

Solution

When your application was running locally, your frontend can fetch info from the backend through the local URL (localhost) but this changes when you deploy the backend and it runs on an entirely different URL on the internet.

Your React application, as it is now, is essentially trying to fetch from the user's localhost which, in most if not all cases doesn't have any server running, causing the ERR_CONNECTION_REFUSED

You shouldn't hardcode the server address in your frontend application, and use URLs starting with / (eg: /api/posts/create)

While developing locally you can allow React to fetch from the backend using the proxy option.

Answered By - FalseDev