Home
Support Forums

React app fails to make request to heroku

Hello everyone,

My site: https://peppermint-chat.netlify.app/

I have a react app uploaded to netlify and backend is on heroku. The problem is although I can login which means it gets reply from backend on heroku, I cannot get other data like contacts list. I checked and heroku works: https://peppermint-chat-server.herokuapp.com/user/andrey@mail.com/contacts. For some reason app makes request to client side on netlify(like this: https://peppermint-chat.netlify.app/user/andrey@mail.com/contacts) instead of heroku. I put environment variables in Netlify as well as in netlify.toml. I even added .env with link to heroku in client side of app. Still the app makes contacts request to front end. What am I doing wrong?

Locally the app works fine with local front end making request to backend on Heroku.
You can see the problem in console if you login the above mentioned site with the credentials:
email: andrey@mail.com
password: qwerty123

Hey @hanuz06,
I just logged in with your test credentials and was able to see the contacts list. All the network requests to the server look fine (which is kind of surprising since you have commas and @s in the URL, but that’s a tangent :slight_smile: ):

Have you resolved this since writing in?

1 Like

Hi Jen,

Thank you for response. Yes, I fixed the problem. The app didn’t want to pick environment variables in both toml file and on Netlify site in deploy section. I added the following lines at the root of the app and it works now:
if (process.env.REACT_APP_BACKEND_URL) {
Axios.defaults.baseURL = process.env.REACT_APP_BACKEND_URL;
}

1 Like

Awesome, glad to hear it- and thanks for sharing the fix!