Q:

fetch data from different localhost in Angular

in Angular, ng serve --port 4200 --host 0.0.0.0 creates an instance of http server. I've been told, that in order to fetch data from server side scripts in Angular, another localhost is needed.
In ngOnInit I fetch the data:
  ngOnInit(){
    this.http.get('http://localhost/echo.php').subscribe(data => {
      console.log(data);      
    });
  }

This fetch has a status code 200 in Network tab of Developer tools but I am getting a CORS error in the console:
Failed to load http://localhost/echo.php: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

It appears that differenr ports cause this. What should I do to prevent that? Browser itself has no issue by fetching this file, it is Angular that complains.
UPDATE: I've followed the suggestions and came up with a new error. this time it is: GET http://localhost:4200/backend/echo.php 504 (Gateway Timeout)
the "other" server is configured to listen to port 80 with DocumentRoot being backend ..
proxy.conf.json:
{
  "/backend/*": {
    "target": "http://localhost:80",
    "secure": false,
    "logLevel": "debug"
  }
}

.ts:
  ngOnInit(){
    this.http.get('http://localhost:4200/backend/echo.php').subscribe(data => {
      console.log(data);      
    });
  }

file structure:

A:

You can proxy your application on http://localhost by creating a file called proxy.conf.json in your angular project with the following content: 
{
  "/api": {
    "target": "http://localhost",
    "secure": false
  }
}

and then starting ng serve with the additional parameter --proxy-config proxy.conf.json 
ng serve --port 4200 --host 0.0.0.0 --proxy-config proxy.conf.json

You have to change your call then to include the port and  /api prefix: 
this.http.get('http://localhost:4200/api/echo.php').subscribe(data => {
...

You can find more details here

