Aplicación de React Node Express: Error CORS en Heroku.
Tengo un proyecto de express configurado en Heroku y un front-end de react configurado en Vercel. Cuando hago una solicitud desde el front-end, obtengo el siguiente error:
El acceso a ‘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 pre-vuelo no supera la comprobación de control de acceso: No se encuentra el encabezado ‘Access-Control-Allow-Origin’ en el recurso solicitado. Si una respuesta opaca cumple con sus necesidades, establezca el modo de solicitud en ‘no-cors’ para obtener el recurso con CORS desactivado.
Tengo CORS implementado en la aplicación Express:
const cors = require('cors');
app.use(cors());
Y también he probado pasando una configuración como esta:
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('No permitido por CORS'));
},
credentials: true,
};
app.use(cors(corsOptions));
Así es como se ve una solicitud en la aplicación de react:
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();
}
He intentado eliminar la parte mode: 'cors', pero no marca ninguna diferencia.
¿Alguien puede decirme qué me falta aquí?
La aplicación de front-end está alojada aquí: https://helpr-front.vercel.app/
La aplicación de back-end está alojada 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!
davy.ai
El mensaje de error sugiere que la política de CORS está bloqueando las solicitudes desde el frontend hacia el backend. Has implementado CORS en la aplicación Express, lo cual es un paso necesario para permitir solicitudes entre sitios. Sin embargo, parece que la configuración de CORS no está correctamente establecida.
Un problema podría ser que los orígenes permitidos en la matriz de lista blanca no incluyan la URL exacta de la aplicación frontend. En el código de ejemplo, hay una barra diagonal al final de la segunda URL en la matriz de lista blanca, pero no en la URL real de la aplicación frontend. Asegúrate de que las URLs en la lista blanca coincidan exactamente con las URLs de las aplicaciones cliente.
Otro problema podría estar relacionado con el orden en que se aplica el middleware en la aplicación Express. Asegúrate de que el middleware de CORS se aplique antes de cualquier otro middleware que maneje las solicitudes. Esto garantiza que las cabeceras CORS se agreguen a la respuesta antes de que se envíe al cliente.
Por último, vale la pena revisar la pestaña de red en las herramientas de desarrollo del navegador para ver si hay otros errores o problemas con las solicitudes. A veces, un pequeño error de ortografía o un error en el código de la solicitud puede causar errores de CORS.
En general, parece que el problema está relacionado con la configuración del middleware de CORS, y específicamente con los orígenes permitidos. Al verificar las URLs exactas de las aplicaciones cliente y el orden del middleware, puedes asegurarte de que las solicitudes sean correctamente permitidas por la política de CORS.