问题

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:

{
    "/api":{
        "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: 127.0.0.1:4200
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.

specifying random localhost ports for both the angular app and file.php
using setTimeout to add a delay to the .getData() function call
disabling firewall
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.

回答1:

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:

{
    "/api":{
        "target": "http://127.0.0.1:1234",
        "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!

来源：https://stackoverflow.com/questions/53732761/econnrefused-for-proxy-request-from-localhost-to-another-localhost

标签

javascript