Versiones comparadas

Clave

  • Se ha añadido esta línea.
  • Se ha eliminado esta línea.
  • El formato se ha cambiado.

...

Esto también debería descargar las dependencias correctamente.

Error "Failed to execute 'open' on 'XMLHttpRequest': Invalid URL" al probar teniendo tanto el UI como la API en local

Haciendo pruebas en local, teniendo desplegados tanto el UI como el backend, podemos encontrarnos con que al entrar en nuestra aplicación entramos en un bucle que nos lleva constantemente al login, y en la consola del navegador nos salen estos errores:

Image Added

Esto se debe (al menos en varios casos que han sucedido) a que las URLs de hateoas no se están formando bien en local. Esto es, si tenemos un método así en nuestro servicio.api.js (cambiando servicio por el que sea):

Bloque de código
languagejs
hateOAS: (url) => (
    url ? apiRequest({ url: url.replace(environmentURL, '') }) : Promise.reject(new Error('sin URL'))
  ).then((response) => response.data),

El replace no se hace correctamente, por lo tanto tendremos que cambiarlo para probar en local. Añadiremos la siguiente función:

Bloque de código
languagejs
function limpiarUrl(url) {
  if (url.startsWith('http')) {
	// + 11 para quitar '.um.es:8000'
    return url.substring(url.search('.um.es') + 11);
  }
  return url;
}

Con el replace original quitaríamos apidesa.um.es, apitest.um.es o api.um.es, dejando sólo el resto del path del endpoint, por ejemplo, /acade/noseque.

Y sustituiremos el replace por dicha función:

Bloque de código
languagejs
hateOAS: (url) => (
    url ? apiRequest({ url: limpiarUrl(environmentURL) }) : Promise.reject(new Error('sin URL'))
  ).then((response) => response.data),

¡OJO! Este cambio no se debe incluir en ningún commit, no se debe subir, es únicamente para probar en local llamando a la API desplegada también en local.

Por último, como lo que estamos haciendo es que la llamada sea a "/acade/noseque", tendremos que indicar en nuestro .env.local la url de nuestro backend en local, y las rutas para las que queramos que se llame a dicho backend, por ejemplo:

Bloque de código
# URL del API para desarrollo en local
VUE_APP_BACKEND=https://atica-67-165.atica.um.es:8080
# Si se necesitan varias rutas, separar por espacios en la misma linea
VUE_APP_BACKEND_ROUTES=/acade