Tengo un proyecto expreso configurado en Heroku y una interfaz de reacción configurada en vercel. Cuando hago una solicitud desde el front-end, aparece el siguiente error:
El acceso para buscar en 'https://helpr-dev.herokuapp.com/users/register' desde el origen 'https://helpr-front.vercel.app' ha sido bloqueado por la política de CORS: la respuesta a la solicitud de verificación previa no pasar la verificación de control de acceso: No hay ningún encabezado 'Access-Control-Allow-Origin' en el recurso solicitado. Si una respuesta opaca satisface sus necesidades, establezca el modo de la solicitud en 'no-cors' para obtener el recurso con CORS deshabilitado.
Tengo CORS implementado en la aplicación Express:
const cors = require('cors') app.use(cors())Y también he intentado pasarle una configuración como:
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))Así es como se ve una solicitud en la aplicación de reacción:
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() } Intenté eliminar el mode: 'cors' pero no hace la diferencia.
¿Alguien puede decirme lo que me estoy perdiendo aquí?
La aplicación de front-end se aloja aquí: https://helpr-front.vercel.app/ La aplicación de back-end se aloja aquí: https://helpr-dev.herokuapp.com/
El código completo del front-end se puede encontrar aquí: https://github.com/coccagerman/helpr-front El código completo del back-end se puede encontrar aquí: https://github.com/coccagerman/helpr-back
¡Gracias!
Entonces esto fue causado principalmente por un problema con la conexión a mongoDb atlas. En primer lugar, la dirección IP de Heroku no se incluyó en la lista blanca de la conexión de red de la base de datos. Se arregló como se menciona aquí: Conexión de la aplicación Heroku al servicio Atlas MongoDB Cloud
Luego tuve un error en el URI de conexión de mongo atlas que estaba usando.
Y, por último, parece necesario agregar el mode: 'cors', config en cada solicitud que hago.
En express, no se necesita configuración cors. Solo uso app.use(cors())