在Angular应用程序中进行代理时出现504(网关超时)错误

Question

我正在尝试设置角度应用程序以使用2个不同的本地主机.

我backend在项目根目录中创建了一个文件夹,并echo.php在其中添加了文件.在项目根目录中,我还创建了proxy.conf.json,其中包含以下内容:

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

  }
}

我尝试用以下方法获取echo.php:

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

启动Angular应用程序:

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

在浏览器控制台中,我得到了一个504 error Gateway Timeout.在终端中,错误听起来有点不同:

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

我不知道我做错了什么.你能为我指出正确的方向吗？我可以使用以下URL直接访问非角度(在端口80上运行)服务器上的文件:http://localhost/backend/echo.php.

编辑:

echo.php:

<?php
echo "data from php";

Answer 1

经过许多小时后，我发现了真正的问题。它源于在proxy.conf.json中指定目标。这是对的：

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

这不是：

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

这可能与无法ng serve自行执行有关。

ng serve 

命令返回错误：

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

这是一个老问题，我从来没有深究这个错误。相反，我只是过去ng serve --port 4200 --host 0.0.0.0绕过它。

如果有人可以解释为什么这样做会很棒。我的/etc/hosts文件包含以下内容：

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

Answer 2

我还没有尝试过使用 进行代理ng serve，但对我有用的是将后端应用程序放在根目录中，将角度部分放在文件夹名称view或front-end任何您喜欢的子目录中。检查这里从 Hapi js 启动 Angular 4是否有类似的问题，但使用的是 Nodejs。如果您有任何疑问，请随时询问更多详细信息。