在 Angular 中从不同的本地主机获取数据

在角度中，ng serve --port 4200 --host 0.0.0.0创建一个 http 服务器实例。有人告诉我，为了从 Angular 中的服务器端脚本获取数据，需要另一个本地主机。

在 ngOnInit 中我获取数据：

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

此获取有一个状态代码200 in Network tab of Developer tools但我在控制台中收到 CORS 错误：

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.

看来不同的端口会导致这种情况。我应该做什么来防止这种情况发生？浏览器本身在获取这个文件时没有任何问题，而是 Angular 抱怨。

更新：我已遵循建议并提出了一个新错误。这次是：GET http://localhost:4200/backend/echo.php 504 (Gateway Timeout)

“其他”服务器配置为侦听端口 80DocumentRoot 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);      
    });
  }

文件结构：

您可以代理您的应用程序http://localhost通过创建一个名为的文件proxy.conf.json在您的角度项目中包含以下内容：

{
  "/api": {
    "target": "http://localhost",
    "secure": false
  }
}

然后开始ng serve带有附加参数--proxy-config proxy.conf.json

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

您必须更改您的呼叫，然后包含端口和/api字首：

this.http.get('http://localhost:4200/api/echo.php').subscribe(data => {
...

您可以找到更多详细信息here