React node express app - Heroku CORS error

Question

I have an express project set up on Heroku and a react front end set up on vercel. When I make a request from the front end, I get the following error:

Access to fetch at 'https://helpr-dev.herokuapp.com/users/register' from origin 'https://helpr-front.vercel.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I have CORS implemented on the Express app:

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

And I've also tried passing it a config like:

const whitelist = ['http://localhost:3000', 'https://helpr-front.vercel.app/']
const corsOptions = {
  origin: function (origin, callback) {
    if (!origin || whitelist.indexOf(origin) !== -1) callback(null, true)
    else callback(new Error('Not allowed by CORS'))
  },
  credentials: true,
}

app.use(cors(corsOptions))

This is how a request looks like in the react app:

const submitRegisterForm = async e => {
        e.preventDefault()

            const response = await fetch(`${serverUrl}/users/register`, {
                method: 'POST',
                mode: 'cors',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    name: name,
                    email: email,
                    password: password,
                    accountType: accountType
                })
            })

            const data = await response.json()
        
    }

I've tried removing the mode: 'cors' part but it doesn't make a difference.

Can someone tell me what I'm missing here?

Front end app is hosted here: https://helpr-front.vercel.app/ Back end app is hosted here: https://helpr-dev.herokuapp.com/

Front end full code can be found here: https://github.com/coccagerman/helpr-front Back end full code can be found here: https://github.com/coccagerman/helpr-back

Thank you!

Can you confirm that your app is running correctly? You can do this either by viewing the logs or entering heroku console — benmotyka, Dec 31 '21 at 14:44
I did't get any errors on deployment. How can I check if it's running? — German Cocca, Dec 31 '21 at 14:47
Simply view logs of your app, if that doesn't help you you might need to enter to your instance with bash and run the app manually (node app.js) to see if it runs correctly — benmotyka, Dec 31 '21 at 14:48
These are the logs I found: https://justpaste.it/91vti I also runned it manually and it seems to be working fine. — German Cocca, Dec 31 '21 at 14:53
Have you tried simply `corsOptions = { origin: 'https://helpr-front.vercel.app' }`? — tromgy, Dec 31 '21 at 15:11

score -1 · Answer 1 · answered Dec 31 '21 at 16:18

-1

So this was caused mainly by a problem with the connection to mongoDb atlas. First, the Heroku IP adress wasn't whitelisted on the the database network connection. Fixed it like mentioned here: Connecting Heroku App to Atlas MongoDB Cloud service

Then I had an error on the mongo atlas connection URI I was using.

And lastly, It seems necessary to add the mode: 'cors', config on every request I make.

On express, no cors config is needed. I just use app.use(cors())

answered Dec 31 '21 at 16:18

German Cocca

669
1
9
17

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 31 '21 at 20:26

React node express app - Heroku CORS error

1 Answers1