React node express app - Heroku CORS error-CodePudding

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!

CodePudding user response：

https://helpr-front.vercel.app/ is not a Web origin. Drop that trailing slash in the origin whitelist:

const whitelist = ['http://localhost:3000', 'https://helpr-front.vercel.app']

You also need to explicitly allow the Content-Type request header, because you're using application/json as its value.

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,
  allowedHeaders: ["Content-Type"],
}

app.use(cors(corsOptions))

CodePudding user response：

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())