Various ports for interface and backend. How to make a request?

Question

Using Angular -CLI as an interface. 4200

Using Express as a backend. Port 8080

The directories are as follows:

Application - backend - ...Express architecture - frontend -...Angular2 architecture 

So, I am launching two projects, two commanders, one for frontent and one for backend. node app.js for the backend (8080), ng serve for frontent (4200).

Suppose I have a layer in the backend that returns some string.

 app.get('/hello', function(req, res) { res.send("Hello!"); } 

How can I make a request from frontend to backend and get this line? I do not want to know exactly how I should use Angular2, because this is not the point. I ask what technology should I use to be able to connect both sides (front and backend) on different ports. If I just run them and make a request from the interface, I get an error because it cannot find /hello url.

Answer 1

Your request /hello means the absolute path inside the application using the angular application, so the request is sent to http://localhost:4200/hello . The angular app just doesn't know about the express app you want to target.

absolute urls

If you want to access the hello route in another (express) application, you need to explicitly specify this by specifying http://localhost:8080/hello .

CORS

By doing this, the correct application is targeted, but you are likely to run into CORS problems because the browser will prevent javascript code from localhost:4200 to access the server in localhost:8080 . This is the security feature of your browser. Therefore, if you want to allow 4200 code access to the 8080 backend, your backend can list this so-called origin. For more information, see http://enable-cors.org/ and the corresponding express middleware that you can use to support the roots in your server ( https://www.npmjs.com/package/cors ).

Using this approach has two drawbacks, in my opinion. First, you need a way to tell your interface under which an absolute URL can reach the backend. This has to be customizable because you need different URLs for developers, staging and production. Then you also need a way to manage all your white URLs, because the frontend in production will have a different URL than when working with the frontend in development. This can become quite cumbersome to process.

backend proxy

The best approach, in my opinion, is to deal with this in your infrastructure by proxying backend in your external application. With a proxy server, you basically tell the server of your interface that all requests to some URL should be transferred to another application. In your case, this may mean, for example, that you configure the proxy for the path /api/ to proxy the application to localhost:8080 . Then the server does not try to find the URL, for example /api/hello , in its external application, but redirects your request to localhost:8080/hello . In your angular application, you do not need to care about the URL of your backend, and you can always query the URL, for example /api/some-express-route .

To do this, you need to configure your angular dev server to proxy requests. For more details on how to do this, see the docs https://github.com/angular/angular-cli#proxy-to-backend . When switching to production, you can do this by setting up your web server, for example. nginx for proxying requests.