Angular 嘗試從 localhost:4200 代理請求 /api/books 到 http://localhost:3333 時出現 HPM localhost 錯誤

Question

嘗試了幾個小時來解決此問題，但無法發出帶有此錯誤的發布請求。 起初我使用的是 ng serve 但后來開始使用 npm start 但仍然出現錯誤。

錯誤：

[HPM] Error occurred while trying to proxy request /api/books from localhost:4200 to http://localhost:3333 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

我的代理文件：

{
  "/api/*": {
    "target": "https://localhost:4200",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

Answer 1

這是 NX Monorepo 的問題嗎？ 如果是，您只是在運行此命令：

ng serve

在終端的新選項卡中，還運行命令：

ng serve api

由於兩台服務器都需要啟動。

Answer 2

如果您看到上述問題，很可能是前端在后端之前啟動。 看到后端命令提示符啟動並運行后，只需在瀏覽器中刷新 Angular 應用程序即可。

Answer 3

我的 .NET 6 Angular 12 spa web 應用程序中的身份驗證突然停止工作，即使我沒有更改身份驗證代碼。 對於 .NET 6，web 應用程序是通過代理啟動的，這與 .NET 5 及之前的情況不同。 代理設置保存在 ClientApp 文件夾中的 proxy.conf.js 中。 為了讓我的 web 應用程序取得成功，我必須學習很多關於如何更新這些設置的知識。

所以突然之間，我對 WebAPI 的身份驗證不再有效，並且我收到了此處描述的 [HPM] 錯誤。 在幾個 GitHub 絕對不是 .NET Angular 問題的問題中，但大約是相同的錯誤消息，我看到人們推薦，使用他們擁有的某種設置（我沒有）來更改他們的代理設置

https://localhost:{port}

至

https://[::1]:{port}

這些答案得到了很多贊成。 我的問題是，我沒有他們的配置設置，我有 proxy.conf.js。 但我試了一下，令人驚訝的是它確實解決了我的問題。 [HPM] 錯誤消息消失，身份驗證再次開始工作。 我希望我首先知道為什么我突然遇到了這個問題——我不明白——但它確實解決了它。

實際上，在 proxy.conf.js 中，我必須更改的行接近頂部，在文件的第 3 行，最終結果是：

const target = env.ASPNETCORE_HTTPS_PORT ? `https://[::1]:${env.ASPNETCORE_HTTPS_PORT}` :
    env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split( ';' )[0] : 'http://[::1]:4401';

其他人的最后一個端口號會有所不同。 關於這一切，我還想了解更多，但它確實解決了問題。

Answer 4

端口 4200 是您的應用程序正在運行的，不是嗎？ 因此，您必須將代理文件中的目標 url 更改為 localhost:3300。