2

He hecho una aplicación front con angularjs y lo arranco con Grunt. Por otro lado tengo la parte Back que lo levanto con un Tomcat v8.5 Server.

Para hacer las llamadas a back utilizo $http de AngularJS utilizando las rutas que me han proporcionado Back, pero me da siempre el error 404 de que no las encuentra.

Mi aplicación corre en el puerto 9090 y el back en el 8080, pero tengo habilitado el CORS y en otros proyectos no he tenido este problema.

He probado a poner la url absoluta con localhost:8080/urlpeticion y tira bien por lo que me queda clarísimo que el problema es que están en puertos distintos, pero no puedo levantar dos servidores en el mismo puerto, ¿cómo hago que desde el puerto 9090 me cambie la petición al puerto 8080 con el CORS? O de otra forma, me es indiferente.

La llamada que hago desde front es: localhost:9090/servicios/rest/peticion, pero back la espera en: localhost:8080/servicios/rest/peticion.

Necesito saber como hacer un mapeo del puerto. Tenía entendido que el plugin CORS de Chrome lo hacía, pero no sé por qué no me funciona.

$http({method: 'GET', url: '/servicios/rest/peticion'});
10
  • Hola Paula, bienvenida. Puedes añadir codigo tuyo, por ejemplo el de las llamadas $http ? Un saludo
    – lois6b
    Commented el 16 feb. 2017 a las 11:53
  • La línea de código es esa, uso la dirección relativa a donde se encuentre levantado el proyecto, quiero saber alguna forma de que se mapee solo los puertos mientras desarrollo. Commented el 16 feb. 2017 a las 12:00
  • 1
    Paula, Si fuera un problema de CORS no obtendrias 404. El error 404 indica que hay un server per el recurso no esta en esa ruta. ¿Probaste la URL usando PostMan o CURL?, seria una buena prueba. Ademas en Tomacat la URL suele variar de acuerdo al nombre del WAR instalado (el q maneja el back), primero debes asegurarte el URL de la ruta. Commented el 16 feb. 2017 a las 12:06
  • Si pongo la url absoluta: $http({method: 'GET', url: 'localhost:8080/tareashotline/rest/motivos/getmotivos'}); si me retorna los datos correctamente. Commented el 16 feb. 2017 a las 12:19
  • Pon la url completa, usando 'url':'http://localhost:8080/tareashotline/rest/motivos/getmotivos'
    – user227
    Commented el 16 feb. 2017 a las 12:36

2 respuestas 2

3

de los comentarios: Si hago eso, luego voy a tener que cambiar todas las url cuando suba a los servidores de preproduccion y producción. Tiene que haber una forma de que la petición cambie de puerto sin tener que poner la url absoluta

No se puede alterar la "authority" (host + puerto) con una URL relativa (como se explica en la RFC3985 sección 5.2). por lo que no podrías usar algo asi:

// No funciona
$http({method: 'GET', url: ':8080/tareashotline/rest/motivos/getmotivos'});

Pero tienes otras opciones:

La mas simple en este caso es reconstruir el host name con el nuevo puerto, sin clavarlo al localhost de forma que lo mismo funcione en el servidor de producción:

Ejemplo:

$http({method: 'GET', url: resolveHost( '/tareashotline/rest/motivos/getmotivos'}));

//... 

function resolveHost(url) {
  // nombre del server (localhost o el nombre en produccion)
  var server = window.location.hostname + ":8080"; // aqui el puerto del backend
  return server + url;
}     

Esto funciona porque window.location.hostname lleva el nombre actual del servidor de frontend (en desarrollo es localhost pero en producción es un nombre diferente ej. midominio.com). De hecho toma el valor contenido en la cabecera HTTP Host:

La unica condicion que tiene este codigo es que tanto el Frontend y el Backend esten ubicados en el mismo servidor.

5
  • Sí, irán al mismo servidor. Commented el 16 feb. 2017 a las 13:03
  • En vista de que no podría ser resuelto en el browser, según afirma y documenta Emanuel Ve... ¿Serviría talvez una librería de proxy en el 9090, que transfiera el flujo http y te comunique al backend en 8080 de forma trasparente para el lado cliente?
    – mapusoft
    Commented el 16 feb. 2017 a las 15:52
  • Eso es lo que quiero hacer sin tener que meter ese código, pero no sé cómo y el principal motivo para querer esto es que tengo montada una estructura de mocks desde grunt que si no detecta back levanta un servidor ficticio para devolverme los json de las peticiones y si hago lo que dice Emanuel se me va al traste toda la estructura de mocks que he montado. Commented el 16 feb. 2017 a las 16:44
  • @mapusoft Lo interesante tu enfoque es que no hace falta que el cliente sepa como funciona el back-end, con un mínimo overhead. Si no quieres responder avisame y edito esta resuesta. Commented el 16 feb. 2017 a las 16:45
  • Hola @Emanuel Ve, tenga absoluta libertad de agregar en la respuesta para finalizar la pregunta. Ese re-direccionamiento lo están utilizando en el trabajo donde estoy, utilizando un servlet y una configuración xml en tomcat, en patrón proxy.
    – mapusoft
    Commented el 16 feb. 2017 a las 18:00
0

He encontrado una solución mejor sin tener que modificar el puerto desde angularjs y tener que pasar la url completa en la petición.

Como he comentado uso Grunt para levantar un servidor para el front y hay una solución utilizando el fichero gruntfile.js para que las peticiones desde mi localhost:9090 lleguen a la parte back que está en localhost:8080.

En la propiedad connect después de options en el Gruntfile.js añadir (según mi ejemplo):

proxies: [
    {
        context: '/servicios/rest',
        host: 'localhost',
        port: 8080
    }
]

Y en la parte de registerTask:

grunt.registerTask('server', function (target) { 
    grunt.task.run([
        'clean:server',
        'compass:server',
        'configureProxies', //<-- Esto es lo que hay que añadir 
        'connect:livereload',
        'watch'
    ]);
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.