2

首先，我是 Angular 的新手，我正在逐步学习教程视频。我已经在这个问题上停留了将近 2 周，并且花了很多时间在其他类似的论坛中寻找解决方案。我意识到这是一个常见的错误，但是在尝试了几十个左右的解决方案但没有成功之后，我想我不妨发布我的经验，也许它可以为我们许多人似乎遇到的这个问题提供一些启示。

问题

该错误发生在跟随视频的“Angular Tutorial #13”部分，该部分开始于 1:42:00 左右。我完全按照视频中显示的所有步骤进行操作，但在运行“npm start”的终端中遇到以下错误消息：“start”
[HPM] Error occurred while trying to proxy request /api/file.php from localhost:4200 to http://localhost:1234 (ECONNREFUSED)
的我的 package.json 脚本：“ng serve --proxy-config proxyconfig.json " 并且我的 proxyconfig.json 包含：

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

在 CMD 中，我导航到文件夹“intro2angular”，它是“/test/api/file.php”的根目录，然后在 VisualStudioCode 的 powershell 中运行
php -S localhost:1234之前运行npm start。然后我跑npm start。代码编译成功。在 Chrome 中，如果我转到该文件，http://localhost:1234/test/api/file.php则该文件将显示在浏览器中。但是，如果我去http://localhost:4200并单击执行代码以请求file.php的锚点，则[HPM] Error occurred while trying to proxy request /api/file.php from localhost:4200 to http://localhost:1234 (ECONNREFUSED)错误将显示在终端中。在 Chrome 中开发人员工具的网络选项卡中，当我检查file.php的标题时，我看到以下内容：

Request URL: http://localhost:4200/api/file.php
Request Method: GET
Status Code: 504 Gateway Timeout
Remote Address: 127.0.0.1:4200
Referrer Policy: no-referrer-when-downgrade

请原谅我在解释我遵循的每一步时过于冗长，但由于我已经看到几个类似的论坛帖子，关于在尝试使用代理时引发的 ECONNREFUSED 错误，我认为包括每个小细节可能是区分来源的必要条件本例中的错误。如果需要更多详细信息/代码，我很乐意将其包含在内。

到目前为止我尝试过的解决方案

请注意，这不是一个完整的列表，我尝试了其他几种解决方案，但这些似乎是对其他人有效的最常见的解决方案。另外，我并不是说我不会再尝试这些解决方案，因为我愿意接受任何和所有建议。

  1. 为 Angular 应用程序和 file.php 指定随机 localhost 端口
  2. 用于setTimeout向.getData()函数调用添加延迟
  3. 禁用防火墙
  4. 包括proxyconfig.json"pathRewrite": {"^/api" : ""}的选项

我感谢有关此问题的任何和所有帮助/建议/讨论，因为我自己没有成功，并且在解决此问题之前我无法继续使用角度教程。先感谢您。

4

2 回答 2

5

如果您使用 Angular 和 PHP 内置服务器，则必须在双方都使用 IP 地址。所以类似于："target": "http://127.0.0.1:8000"在 Angular 方面 +php -S 127.0.0.1:8000 -t public在 PHP 方面。

在这里找到这个提示：https ://forum.freecodecamp.org/t/econnrefused-error-during-learn-angular-freecodecamp-org-video/245739

于 2020-11-02T21:00:36.907 回答
2

我遇到了同样的问题并寻找了多年的解决方案......

就我而言，它有助于提供本地主机的 IP，而不是“本地主机”。

因此，将您的代理配置更改为：

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

并且还尝试使用“ng serve --proxy-config proxyconfig.json”而不是 npm start 版本。我读到有时 package.json 配置部分被某些人忽略了。

希望这可以帮助！

于 2019-06-24T07:06:49.337 回答