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

Posted 2023-02-26

【中文标题】从Angular中的不同本地主机获取数据

【英文标题】：fetch data from different localhost in Angular

【发布时间】：2018-05-16 10:27:48

【问题描述】：

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

在 ngOnInit 中我获取数据：

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

此提取在 Network tab of Developer tools 中有一个状态代码 200，但我在控制台中收到了 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);      
    );
  

文件结构：

【问题讨论】：

XMLHttpRequest cannot load https://www.[website].com/的可能重复

它与 Angular 无关。这是浏览器 javascript 安全性的核心特性。

@Quentin 我认为它可能与 Angular 有关。 angular.io/api/platform-browser/DomSanitizer.

@Pac0 — 仅当 Angular 是用 JavaScript 编写时，它才与 Angular 相关。该 URL 似乎与问题无关。

我试过这个看看它是否会起作用。但事实并非如此。如果您使用的是 WAMP，如果您的 URL 文件在文件夹中，则可以在 apache 的 httpd.conf 中使用 Directory 标签，如果是另一个域，则可以使用 LocationMatch。我使用该技术能够从角度运行。

【参考方案1】：

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

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

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

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

【讨论】：

你可以看github.com/HackPoint/ng-apps我的仓库我也是这样做的

谢谢。现在我在控制台和网络选项卡中收到 504（网关超时）错误 :)

最后的问题是http://localhost 需要替换为http://127.0.0.1。之后，这个解决方案就起作用了。

【参考方案2】：

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

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

然后将代码inside这样创建文件（请注意目标部分）：

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

然后更改 package.josn 文件并插入如下图所示的代码“

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

注意：如果您不为 Angular 项目执行此操作，则会出现 CORS 问题。