0
327
ViewsLa implementación de Netlify no se puede conectar al backend de Heroku
He creado un pequeño programa que funciona bien cuando lo ejecuto localmente. Implementé el backend en Heroku y puedo acceder a él yendo directamente a la URL ( http://gymbud-tracker.herokuapp.com/users ) o ejecutando el frontend localmente. Hasta aquí todo bien.
Sin embargo, cuando ejecuto npm run-script build y lo implemento en Netlify, algo sale mal y cualquier intento de acceder al servidor me arroja el siguiente error en la consola:
auth.js:37 Error: Network Error at e.exports (createError.js:16) at XMLHttpRequest.p.onerror (xhr.js:99)La acción que está empujando 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); } };Me he estado tirando de los pelos tratando de averiguar qué está cambiando cuando construyo e implemento, pero no puedo resolverlo.
Como digo, si ejecuto el front-end localmente, accederá al backend de Heroku sin problemas, sin errores y funcionando exactamente como lo esperaba. Creo que la llamada a la API es correcta: const API = axios.create({baseURL: 'http://gymbud-tracker.herokuapp.com/' });
Me preguntaba si era un problema con el acceso de red a la base de datos 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 maten!). La base de datos MDB en realidad está en la misma colección que otros proyectos que he usado, que no han tenido este problema en absoluto.
¿Alguna idea de lo que tengo que hacer?
El front-end está disponible aquí: https://gym-bud.netlify.app/ Y todo se implementa en GitHub aquí: https://github.com/gordonmaloney/gymbud
2 answers
Answer question0
Su problema es CORS (intercambio de recursos de origen cruzado). Cuando visito su sitio e inspecciono la página, veo el siguiente error en la consola de JavaScript, que es como sé esto:
Básicamente, este error significa que su aplicación de cara al público (que se ejecuta en vivo en Netlify) está intentando realizar una solicitud HTTP desde su front-end de JavaScript a su backend de Heroku implementado en un dominio diferente.
CORS dicta qué solicitudes de una aplicación frontend están PERMITIDAS para realizar una solicitud a su API backend.
Lo que debe hacer para solucionar esto es modificar su aplicación Heroku y hacer que devuelva el encabezado Access-Control-Allow-Origin apropiado. Este artículo en MDN explica el encabezado y cómo puedes usarlo.
Aquí hay un ejemplo simple del encabezado que podría configurar en su backend de Heroku para permitir que esto funcione:
Access-Control-Allow-Origin: *Sin embargo, asegúrese de leer la documentación de MDN, ya que este ejemplo permitirá que cualquier aplicación de front-end realice solicitudes a su backend de Heroku cuando, en realidad, probablemente desee restringirlo solo a los dominios de front-end que cree.
0
Dios, me siento tan tonto, pero al menos lo he resuelto.
Miré la consola en un navegador diferente (Edge), y dijo que lo estaba bloqueando porque era de origen mixto, y me di cuenta de que me había perdido la s en el https en mi llamada a la API, por lo que en realidad no era un problema cors (¿no lo creo?), ¡pero solo un error tipográfico de mi parte!
Así que cambié: const API = axios.create({baseURL: 'http://gymbud-tracker.herokuapp.com' }); Para esto: const API = axios.create({baseURL: 'https://gymbud-tracker.herokuapp.com' });
Y ahora está funcionando perfectamente ☺️
¡Gracias por tu ayuda! Incluso si no fuera el problema aquí, definitivamente aprendí mucho más sobre cors en el camino, así que eso es bueno.