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

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)

About this issue

  • Original URL
  • State: open
  • Created 7 years ago
  • Comments: 46 (1 by maintainers)

Most upvoted comments

@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!

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 } }

dafsdf

  • `
  • [ ]

``

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

`

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

change localhost to 127.0.0.1 can change this issue

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

@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.

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

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

I can just kiss you right now

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

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

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 } }

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

      "/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": ""
        }
      },

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

@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.

我今天也遇到这个问题,我的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就好了。

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