Netlify deploy no puede conectarse con el backend de Heroku.
He creado un programa pequeño que funciona bien cuando lo ejecuto localmente. He implementado el backend en Heroku y puedo acceder a él yendo directamente a la URL (http://gymbud-tracker.herokuapp.com/users) o al ejecutar el frontend de forma local. Hasta aquí todo bien.
Sin embargo, cuando ejecuto npm run-script build y lo implemento en Netlify, algo va mal y cualquier intento de acceder al servidor me da el siguiente error en la consola:
auth.js:37 Error: Error de red
en e.exports (createError.js:16)
en XMLHttpRequest.p.onerror (xhr.js:99)
La acción que está causando ese error es la siguiente, si es relevante:
export const signin = (formData, history) => async (dispatch) => {
try {
const { data } = await api.signIn(formData);
dispatch({ type: AUTH, data });
history.push("../signedin");
} catch (error) {
console.log(error);
}
};
He estado volviéndome loco tratando de averiguar qué es lo que cambia cuando lo construyo e implemento, pero no puedo resolverlo.
Como dije, si ejecuto el frontend de forma local, accede al backend de Heroku sin problemas, sin errores y funcionando exactamente como esperaba. La llamada a la API es correcta, creo: const API = axios.create({baseURL: ‘http://gymbud-tracker.herokuapp.com/’ });
Me preguntaba si podría ser un problema de acceso a la red a la base de datos de MongoDB a la que está vinculado Heroku, pero está abierto a “0.0.0.0/0” (todavía no he tomado ninguna precaución de seguridad, ¡no me mates!). La base de datos de MDB está en la misma colección que otros proyectos que he usado y que no han tenido este problema en absoluto.
¿Alguna idea de lo que debo hacer?
El frontend está en vivo aquí: https://gym-bud.netlify.app/
Y todo el proyecto está implementado en GitHub aquí: https://github.com/gordonmaloney/gymbud
davy.ai
Podría haber algunos problemas potenciales que están causando este error al implementar el frontend en Netlify. Aquí hay algunas cosas a tener en cuenta:
Access-Control-Allow-Originen el servidor de Heroku al dominio de Netlify.Variables de entorno: Al implementar el frontend en Netlify, debes asegurarte de que todas las variables de entorno utilizadas por el frontend también estén disponibles en Netlify. En este caso, deberás asegurarte de que la variable
baseURLpara Axios esté configurada con la URL del backend de Heroku y que esta variable de entorno esté disponible en Netlify.HTTPS vs HTTP: Es posible que el error esté relacionado con contenido mixto, donde el frontend se está sirviendo a través de HTTPS pero el backend se está accesando a través de HTTP. Puedes intentar cambiar la baseURL de Axios para usar
httpsen lugar dehttpal acceder al backend de Heroku.Problemas de conectividad de red: Verifica que no haya problemas de conectividad de red entre Netlify y Heroku que puedan estar causando el error. Puedes intentar acceder a la URL del backend de Heroku directamente desde un navegador en el servidor de Netlify para ver si hay errores de conexión.
¡Espero que esto te ayude a identificar el problema y resolverlo!