[HPM] Error occurred while trying to proxy request / from localhost:3000 to http://localhost:8080 on fresh Debian Stretch 4.8.0 install

[kfrz]

When running npm run dev after npm install I expect to navigate to localhost:3000 and see the starter page, instead I see Error occured while trying to proxy to: localhost:3000/ and in logs

10:44:07 PM webpack.1 |  [HPM] Error occurred while trying to proxy request /favicon.ico from localhost:3000 to http://localhost:8080 (ECONNREFUSED) (https:
10:44:07 PM webpack.1 |  >  //nodejs.org/api/errors.html#errors_common_system_errors)

[kfrz]

Maybe this is some conflicting port but I don't see how, I don't have any other things running on that port.

[saikat]

That seems like your app server is not starting up at localhost:8080. Can you paste the full logs?

[kfrz]

Here's a huge log file, most of it is built notifications but I figured it'd be prudent since you said

full logs

https://gist.github.com/kfrz/0bd23e0d0bf23f329fb9f43e7d800722

Thanks for any help :) I'm quite new to this ecosystem, I realize this is probably a simple issue.

[jamesbirrellgray]

@kfrz - change the port from 8080 to something else (I just did 8090) on your local /.env file (here https://github.com/saikat/react-apollo-starter-kit/blob/master/.env#L2).

I think port 8080 was conflicting with something else running on my machine, probably the same for you.

[jellyfish-tom]

@saikat no necesarilly, it s just common bug in error log. I tried to proxy from 9000, to 8081 and saw the same error saying it can not proxy to 9000... makes no sense.

You probably need to rewrite your webpack proxy config:

replace localhost with [::1]. like so: 'http://[::1]:3000'

this works for me:

below code comes from webpack configuration file - section devSever (as seen below) https://webpack.github.io/docs/webpack-dev-server.html#proxy

devServer: {
  proxy: {
    "*": "http://[::1]:8081"
    // "secure": false,
    // "changeOrigin": true
  }
},

one wildcard, or double, with 'secure' or 'changeOrigin' - doesnt matter. [::1] is the game changer.

Wider discussion and more options here: https://github.com/webpack/webpack-dev-server/issues/793

Good luck!

[rkHPE1]

@jellyfish-tom , do you know what the path is to access that file so I can make the edit and see if it works? Thanks

[jellyfish-tom]

@rkHPE1 path depends on your project structure. My guess would be in the root directory of your project. file should be named webpack.config.js If not there, just search for it;)

[BooMiny]

proxyTable: { '/goods': { target: 'http://localhost:3000' } }, 我的也出现了这样的情况，该怎么改呢

[niudong1001]

Me too, sometime happens ,what i can dooo?

[purpletianjing]

@BooMiny 他的意思是把'http://localhost:3000'改成'http://[::1]:3000'，但是我试了并没有用，还是会报错

[Leo9305]

you can remove the start script from package.json and then restart

[fantastory]

Got similar Isue. The problem was that server was runnig on ipv6 and proxy was connecting to ipv4

[zhoushirong]

检查一下host，127.0.0.1是不是被注释掉或者删掉了，绑一个 127.0.0.1 localhost 的host试试

[RobertPal95]

For me the problem was the HTTPS, not HTTP, and worked with changeOrigin, solve it like this:

{ "/api": { "target": "https://localhost:12345", "secure": false, "changeOrigin": true } }

[andyxmq]

change localhost to 127.0.0.1 can change this issue

[tylerrrkd]

@RobertPal95 it works well!! thank you so much~~

[agrublev]

{ "/api": { "target": "https://localhost:12345", "secure": false, "changeOrigin": true }

I can just kiss you right now

[akhilkumarpuvvada]

When running npm run dev after npm install I expect to navigate to localhost:3000 and see the starter page, instead I see Error occured while trying to proxy to: localhost:3000/ and in logs

10:44:07 PM webpack.1 |  [HPM] Error occurred while trying to proxy request /favicon.ico from localhost:3000 to http://localhost:8080 (ECONNREFUSED) (https:
10:44:07 PM webpack.1 |  >  //nodejs.org/api/errors.html#errors_common_system_errors)
``

have you solved the error if solved can you paste the solution please

[flyxl]

Please make sure you have the following configuration in you hosts file: 127.0.0.1 localhost You can find the hosts file in /etc/hosts in linux and macos system and C:\Windows\System32\drivers\etc in windows

[tanmoyk2]

@jellyfish-tom : Man you rocks ...

[m-farahmand]

Thanks @flyxl that was a good solution, it doesn't need to change app configuration. I got this error after installing qlike view and nextvpn.

[akerdi]

I meet [HPM] Error occurred while trying to proxy request just today.finally solve it.

Scene:

Yesterday, VueProject worked well. Git checkout back to some week ago, still didn't work( Used to be working well ).

Until this step save me:

1: sudo vim /etc/hosts && 127.0.0.1   test.company.com # any host is available
2: edit VueProject / config / index.js - proxyTable: {
  '/api': {
    target: 'http://text.company.com:${your server port}',
    secure: false,
    changeOrigin: false,
    pathRewrite: {
      '/api': '/'
    }
  }
}
3: edit VueProject / config / index.js - dev: {
  host: 'test.company.com'
}

maybe this will help someone.

[RaihanMirzaei]

• `

• [ ]

``

- ### ### ### dlkgnj;sdof****

`

[RaihanMirzaei]

dafsdf

[ecigar13]

I have the same issue, and I none of these solutions work. Here's my proxy:

{
  "*": {
    "target": "[::1]:8080/",
    "secure": true,
    "logLevel": "debug",
    "changeOrigin": true,
    "headers": {
      "Connection": "keep-alive"
    },
    "pathRewrite": { "^/*": "" }
  }
}

[zan165]

我今天也遇到这个问题，我的vue代码在另外一台电脑上是能正常运行的。 两台电脑的代码是一样的。配置也是一样的。 dev: {

...

// Various Dev Server settings
host: '0.0.0.0', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

} 我把端口8080 改成 8081就好了。

[wealsegun]

In my own case I discover that the service is not running on the specific port. Check and make sure that the two localhost are running simultaneously. I was able to solve mine by making sure that my localhost:4000 and http://localhost:3000 is running with the same service. That solved my problem

[intkhabahmed]

@saikat no necesarilly, it s just common bug in error log. I tried to proxy from 9000, to 8081 and saw the same error saying it can not proxy to 9000... makes no sense.

You probably need to rewrite your webpack proxy config:

replace localhost with [::1]. like so: 'http://[::1]:3000'

this works for me:

below code comes from webpack configuration file - section devSever (as seen below) https://webpack.github.io/docs/webpack-dev-server.html#proxy

devServer: {
  proxy: {
    "*": "http://[::1]:8081"
    // "secure": false,
    // "changeOrigin": true
  }
},

one wildcard, or double, with 'secure' or 'changeOrigin' - doesnt matter. [::1] is the game changer.

Wider discussion and more options here: webpack/webpack-dev-server#793

Good luck!

Perfect. Also make sure that your server is running on the required port. In my case, I did this configuration, but I didn't start the server and so it was giving ERR_CONNECTION_REFUSED. I went to dist folder and ran the server from there, as I am using Angular Universal and I don't have server.js in my root folder.

[kuzzzzz]

In my own case I discover that the service is not running on the specific port. Check and make sure that the two localhost are running simultaneously. I was able to solve mine by making sure that my localhost:4000 and http://localhost:3000 is running with the same service. That solved my problem

how did you do that

[djdubeyji]

yes @kuzzzzz said it right i also myself figured out that 3000 and 4000 both local host run simultaneously on different terminals and it resolved for me

[RandaHarb]

@saikat no necesarilly, it s just common bug in error log. I tried to proxy from 9000, to 8081 and saw the same error saying it can not proxy to 9000... makes no sense.

You probably need to rewrite your webpack proxy config:

replace localhost with [::1]. like so: 'http://[::1]:3000'

this works for me:

below code comes from webpack configuration file - section devSever (as seen below) https://webpack.github.io/docs/webpack-dev-server.html#proxy

devServer: {
  proxy: {
    "*": "http://[::1]:8081"
    // "secure": false,
    // "changeOrigin": true
  }
},

one wildcard, or double, with 'secure' or 'changeOrigin' - doesnt matter. [::1] is the game changer.

Wider discussion and more options here: webpack/webpack-dev-server#793

Good luck!

---

It Worked finally after two days!!! Thank you so much!

[xiaoyanzheng]

Please make sure you have the following configuration in you hosts file: 127.0.0.1 localhost You can find the hosts file in /etc/hosts in linux and macos system and C:\Windows\System32\drivers\etc in windows

this is useful for me

[danjiroo]

For me the problem was the HTTPS, not HTTP, and worked with changeOrigin, solve it like this:

{ "/api": { "target": "https://localhost:12345", "secure": false, "changeOrigin": true } }

Thanks!! Been scratching my head for the past few hours.

[KravchukA]

Also if You using docker and app communicate between each other **container_name:** node-api { "/api/*": { "target": "http://node-api:3000/", "secure": false, "changeOrigin": true } }

[littleee]

For me the problem was the HTTPS, not HTTP, and worked with changeOrigin, solve it like this:

{ "/api": { "target": "https://localhost:12345", "secure": false, "changeOrigin": true } }

thx

[professorw1]

proxyTable: { '/auth':{ target: 'https://[::1]:3000', changeOrigin: true }, '/color':{ target: 'http://127.0.0.1:3000', changeOrigin: true }, '/project':{ target: 'http://127.0.0.1:3000', changeOrigin: true } Failed to load resource: the server responded with a status of 504 (Gateway Timeout 直接访问3000端口也访问不到 who can help me ,thanks

[albert2k21]

You need to run two bashes terminal. The first terminal with "npm run server" and the second terminal with "npm start.

This work well for me.

[professorw1]

thank you I have solved it ------------------ 原始邮件 ------------------ @.> 发送时间: 2021年4月14日(星期三) 中午12:21 @.>; @.**@.>; 主题: Re: [saikat/react-apollo-starter-kit] [HPM] Error occurred while trying to proxy request / from localhost:3000 to http://localhost:8080 on fresh Debian Stretch 4.8.0 install (#20)

[ifredom]

      "/api": {
        target: "http://test.example.com",    // good: You have to bring http
        // target: "test.example.com",    // bad: only host
        ws: true,
        secure: false,
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      },

[ThisIszas]

for my case, the target url is blocked by internet provider.

[next-ruan-rita]

Hi guys, I can using this method:

Replace localhost to 127.0.0.1 in your package.json proxy

[Hypoterik]

I fixed this by replacing localhost with 0.0.0.0 (thus turning http://localhost:1337 into http://0.0.0.0:1337).

[nohren]

change localhost to 127.0.0.1 can change this issue

amazing and simple. I wonder why this is the case. I will check my /etc/hosts file.

[pjpaparao]

Hi ,

i am getting same issue ,my local server is up.

[webpack-dev-server] [HPM] Error occurred while proxying request localhost:4200/api/upload to localhost:8080/ [ENOTFOUND] (https://nodejs.org/api/errors.html#errors_common_system_errors) error in TS terminal , am using angular 14.

Error occurred while trying to proxy: localhost:4200/api/upload

this error i am getting network

Request URL: http://localhost:4200/api/upload Request Method: POST Status Code: 504 Gateway Timeout Remote Address: 127.0.0.1:4200 Referrer Policy: strict-origin-when-cross-origin

this is my proxy file

{ "/api": { "target": "localhost:8080/", "secure": false, "changeOrigin": true, "logLevel": "debug", "pathRewrite": {"^/api" : ""} } }

Please help me, Thanks .

[nmshafie1993]

I had the same issue when running a react app, check your server address and make sure the proxy is pointed to the right server address.

[waynenguyen1302]

For me the problem was the HTTPS, not HTTP, and worked with changeOrigin, solve it like this:

{ "/api": { "target": "https://localhost:12345", "secure": false, "changeOrigin": true } }

Yes, this works for me, thanks so much!