React + redux app deployed on heroku but backend/api not working

Question

here is my app link https://course-s.herokuapp.com/ and here is my Github repo https://github.com/shaikafroz016/Course-S . The app work perfectly in localhost whit express, MongoDB Atlas, and node server as a backend and react-redux as a frontend but when I am trying to run this on Heroku my says's failed to fetch whats the problem. EDIT: I have mentioned the base url as localhost:3000 in my client so should i have to add heroku app link to base url? can you please help me what to do. And also when i am trying the app with backend localhost (localhost:3000) it work just fine as i close my local server the heroku app says faild to fetch

Answer 1

This must be because of CORS (Access-Control-Allow-Origin), here's a workaround:

run npm install cors

and then add this to your app.js file:

var cors = require('cors')
app.use(cors())

Be sure to add this before all your requests definition (app.get, app.post, etc...)

Now CORS is enabled.

The Access-Control-Allow-Origin header determines which origins are allowed to access server resources over CORS.

Explanation: https://medium.com/@alexishevia/using-cors-in-express-cac7e29b005b