[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