How to build a URL relative to the port but the same hostname?

Question

How to build a URL relative to the port but the same hostname?

Navigation

#1 by (3 votes)
#2 by (0 votes)

2

I have made a front application with angularjs and I start it with Grunt. On the other hand I have the Back part that I raise it with a Tomcat v8.5 Server.

To make the calls to back I use $ http of AngularJS using the routes that have provided Back, but it always gives me the error 404 that it does not find them.

My application runs on port 9090 and back on 8080, but I have CORS enabled and on other projects I have not had this problem.

I tried to put the absolute url with localhost: 8080 / urlpeticion and it pulls well so it is very clear to me that the problem is that they are in different ports, but I can not raise two servers in the same port, how do I make from port 9090 I changed the request to port 8080 with CORS? Or otherwise, I'm indifferent.

The call I make from front is: localhost: 9090 / services / rest / request , but back the wait in: localhost: 8080 / services / rest / request .

I need to know how to do a port mapping. I understood that Chrome's CORS plugin was doing it, but I do not know why it does not work for me.

$http({method: 'GET', url: '/servicios/rest/peticion'});

javascript angularjs http puertos

asked by Paula Fernández Rubio 16.02.2017 в 12:52

source

2 answers

3

of the comments: If I do that, then I will have to change all the urls when uploading to the preproduction and production servers. There has to be a way for the request to change port without having to put the absolute url

You can not alter the "authority" (host + port) with a relative URL (as explained in RFC3985 section 5.2 ). so no you could use something like this:

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

But you have other options:

The simplest in this case is to rebuild the host name with the new port, without nailing it to localhost so that the same thing works on the production server:

Example:

$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;
}

This works because window.location.hostname carries the current name of the frontend server (in development it is localhost but in production it is a different name eg midominio.com ). In fact it takes the value contained in the HTTP header Host:

The only condition that this code has is that both the Frontend and the Backend are located on the same server.

answered by 16.02.2017 в 13:42

Routing Vagrant where is the error? exchange of variables

score 0 · Accepted Answer

I have found a better solution without having to modify the port from angularjs and have to pass the complete url in the request.

As I mentioned Grunt use to raise a server for the front and there is a solution using the file gruntfile.js so that requests from my localhost: 9090 reach the back part that is in localhost: 8080.

In the connect property after options in the Gruntfile.js add (according to my example):

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

And in the registerTask part:

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