To begin, I'm new to angular and I'm following a tutorial video step by step. I've been stuck on this issue for nearly 2 weeks and have spent many hours looking for solutions in other similar forums. I realize this is a common error, but after trying a couple dozen or so solutions but finding no success I figure I may as well post my experience and maybe it can shed some light on this problem many of us seem to be having.

The Issue

The error occurs while following along for the "Angular Tutorial #13" part of the video which starts around 1:42:00. I follow all steps exactly as shown in the video but I encounter the following error message in the terminal in which I run "npm start" :
[HPM] Error occurred while trying to proxy request /api/file.php from localhost:4200 to http://localhost:1234 (ECONNREFUSED)
My package.json scripts for "start": "ng serve --proxy-config proxyconfig.json" and my proxyconfig.json contains:

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

In CMD I navigate to the folder "intro2angular" which is the root of "/test/api/file.php" and I run
php -S localhost:1234 prior to running npm start in the powershell in VisualStudioCode. Then I run npm start. Code compiles successfully. In Chrome, if I go to http://localhost:1234/test/api/file.php then the file is displayed in the browser. However, if I go to http://localhost:4200 and click an anchor which executes the code to request file.php then the [HPM] Error occurred while trying to proxy request /api/file.php from localhost:4200 to http://localhost:1234 (ECONNREFUSED) error is displayed in terminal. In the Network tab of Developer Tools in Chrome, when I check the Headers for file.php I see the follow:

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

Forgive me for being verbose in explaining every step I followed, but since I've seen several similar forum posts regarding the ECONNREFUSED error being raised while trying to use a proxy, I thought that including every minor detail may be necessary to distinguish the source of the error in this instance. If any more details/code is necessary I'm more than happy to include it.

Solutions I've tried thus far

Note that this is not a complete list, I've tried several other solutions but these seem to be the most common which have worked for others. Also, I'm not saying that I wouldn't give these solutions another try as I am open to any and all suggestions.

  1. specifying random localhost ports for both the angular app and file.php
  2. using setTimeout to add a delay to the .getData() function call
  3. disabling firewall
  4. including the option "pathRewrite": {"^/api" : ""} to proxyconfig.json

I appreciate any and all help/suggestions/discussions around this issue as I've had no success on my own and I am unable to continue with the angular tutorial until this issue is resolved. Thank you in advance.

duanji5746 我有同样的问题。你找到了解决方案吗?
一年多之前 回复


我遇到了同样的问题并且搜索了多年的解决方案... </ p>

在我的 如果它有助于提供localhost的IP,而不是“localhost”。</ p>

所以将您的proxy-config更改为:</ p>

“/ api”:{
</ code> </ pre>

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

希望这会有所帮助!</ p>
</ div>



I had the same problem and searched for a solution for ages...

In my case it helped to provide the IP of localhost, instead of "localhost".

So change your proxy-config to this:

        "target": "",
        "secure": false,
        "changeOrigin": true

And also try using "ng serve --proxy-config proxyconfig.json" instead of the npm start version. I read that sometimes the package.json config-part got ignored for some people.

Hope this helps!

Csdn user default icon