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 http://localhost/backend/echo.php直接访问非角度（在端口80上运行）服务器上的文件。

编辑：

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或{{1下的子目录中使用角度部分或者你喜欢什么。在这里Launch angular 4 from Hapi js查看类似的问题但是使用nodejs。如果您有任何问题，请随时询问更多详细信息。

Answer 3

proxy.conf.json文件

{
    "/api/*":{
    "target" : "http://127.0.0.1:1234",
    "changeOrigin" : true,
    "secure" : false
    }
}

更改proxy.conf.json文件，并同时将php开发服务器作为127.0.0.1:1234而不是localhost：1234运行，对我来说解决了这个问题。

Answer 4

我已将超时和重试用于相应的get / post http调用，以解决此504错误，例如 retryWhen（错误=>错误。延迟（5000））。超时（900000）

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

4 个答案: