504 (Gateway Timeout) error when proxying in Angular app

Question

I am trying to setup angular app to work with 2 different localhosts.

I've created a backend folder in project root and added echo.php file in it. In project root, I've also created proxy.conf.json with the follwing content:

{
  "/backend/**": {
    "target": "http://localhost:80",
    "secure": false

  }
}

I try to fetch the echo.php with:

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

Starting the Angular app:

ng serve --port 4200 --host 0.0.0.0 --proxy-config proxy.conf.json

In browser console, I am getting an 504 error Gateway Timeout. In Terminal, the error sounds a bit different:

[HPM] Error occurred while trying to proxy request /backend/echo.php from localhost:4200 to http://localhost:80 (ENOTFOUND)

I have no idea what am I doing wrong. Can you point me in the right direction? I can access the file on non-angular (running on port 80) server directly with this url: http://localhost/backend/echo.php.

EDIT:

echo.php:

<?php
echo "data from php";

Answer 1

After many, many hours I found the real issue. It stems from specifying target in proxy.conf.json. This is correct:

{
  "/backend/*": {
    "target": "http://127.0.0.1",
    "secure": false,
    "changeOrigin":true,
    "logLevel": "debug"
  }
}

And this is not:

{
  "/backend/*": {
    "target": "http://localhost",
    "secure": false,
    "changeOrigin":true,
    "logLevel": "debug"
  }
}

This could be connected with not being capable of executing ng serve on its own.

ng serve 

command returns an error:

getaddrinfo ENOTFOUND localhost
Error: getaddrinfo ENOTFOUND localhost
    at errnoException (dns.js:28:10)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:76:26)

This is an old issue and I never got to the bottom of this error. Instead, I just used ng serve --port 4200 --host 0.0.0.0 to get around it.

It would be awesome if someone could explain why this works. My /etc/hosts file has the following content:

127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost
192.168.1.1      router.hm
127.0.0.1 My-MBP # added by Apache Friends XAMPP