Question

在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中的状态代码为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)

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

文件结构：

Answer 1

您可以在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

Answer 2

如果您有 Tow loalhost 应用程序，首先是Angular应用程序，并且正在 http://localhost:4200 中运行，另一个是API项目并在 {{中运行3}} ，在这种情况下，如果从您的角度应用程序向另一个请求发出请求，则会收到CORS错误，为了解决此问题，您可以逐步使用以下说明：

创建一个文件，并在Angular项目的主文件夹中将其命名为 proxy.config.json ，如下图所示：

http://localhost:3000

然后将代码置于创建的文件中（请注意目标部分）：

{
    "/api/*": {
        "target": "http://localhost:3000",
        "secure": false,
        "logLevel": "debug"
    }
}

然后更改 package.josn 文件并插入如下图片＆＃34;

毕竟你必须使用 npm start 来运行anglar项目

注意：如果你没有为角项目做这件事，你会发现CORS问题。

从Angular

2 个答案: