http-proxy-middleware: [HPM] Error occurred while trying to proxy request

I get the error ([HPM] Error occurred while trying to proxy request /api/v1/xxx from localhost:3000 to http://xxx.com (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)) when I post a body. Solved it by remove the express body-parser middleware before HPM. Mybe help for someone.

In my case I add a header in the client(proxy), then solves it

may this will help you

module.exports = function(app) {
    app.use(proxy('/api', {
        target: 'http://127.0.0.1:8080/',
        headers: {
            "Connection": "keep-alive"
        },
    }));
};

use ip replace “localhost” . i am success，you can try

The body-parser consume the http request body stream before the HPM read it.

body-parser is optional for express. If your app need it, place it after HPM.

Try this:

Replace localhost with [::1]

Old config:

target: 'http://localhost:' + applicationPort,

New config:

target: 'http://[::1]:' + applicationPort,

Works for me!

For me I fixed it by switching localhost to 127.0.0.1 and it was happening locally as well as on Circle-CI. On CI I couldn’t make [::1] work but it’s maybe because of the vm I was using.

I tried https://github.com/chimurai/http-proxy-middleware/issues/171#issuecomment-308690015, modified the example to:

var express = require('express');
var proxy = require('http-proxy-middleware');

var app = express();

app.use(proxy("/", {
        target: 'http://127.0.0.1:8080/',
        secure: false,
        changeOrigin: true,
        logLevel: "debug",
        headers: { Connection: 'keep-alive' },
    }
))

app.listen(3000);

Then hit http://localhost:3000 in my browser. It proxies the request perfectly fine.

With webpack 4.x, I have:

devServer: {
    contentBase: outputPath,
    contentBasePublicPath: '/assets',
    hot: true,
    host: '0.0.0.0',
    port: wdsPort,
    stats: 'errors-only',
    disableHostCheck: true,
    overlay: {
        warnings: false,
        errors: true
    },
    proxy: {
        "/": {
            target: 'http://127.0.0.1:8080/',
            secure: false,
            changeOrigin: true,
            logLevel: "debug",
            headers: { Connection: 'keep-alive' },
        }
    },
    headers: {
        'Access-Control-Allow-Origin': '*',
        'X-Powered-By': `Webpack Dev Server ${webpack.version}`,
    }
},

But I keep getting

[HPM] Error occurred while trying to proxy request /favicon.ico from localhost:8082 to http://127.0.0.1:8080/ (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

In my terminal, or

Error occured while trying to proxy to: localhost:8082/schedule

In my browser. Not sure what the difference is 😦

Edit: Ok, I realized I’m dumb. I’m running webpack-dev-server in a docker/kubernetes container, which means I don’t want localhost nor port 8080. I need to use the internal hostname and port #. e.g.

const nginxPort = process.env.APP_SERVICE_DEVELOPMENT_NGINX_PORT || '80'

            proxy: [{
                context: ['**', '!/assets/**'],
                target: `http://app-service-development:${nginxPort}`
            }],

For anyone running into this issue with Next.js you should be able to disable body-parser by adding bodyParser: false to the route config. E.g:

export const config = {
    api: {
        externalResolver: true,
        bodyParser: false,
    },
};

For me, adding: changeOrigin: true fixed the proxying for me. My origin just kills the connection if the hostname is incorrect.

Don’t see anything unusual in your configuration. Understand your <TARGET> is masked in the example. Can you provide an anonymized <TARGET> example? Since you can have many variations for target.

Wondering if webpack-dev-server might cause the issue…

Can you try out a simplified setup with just express + http-proxy-middleware and see if the issue persists?

https://github.com/chimurai/http-proxy-middleware/blob/master/recipes/servers.md#express

var express = require('express');
var proxy = require('http-proxy-middleware');

var app = express();

app.use(proxy("/api/auth/login", {
  "target": "<TARGET>",
  "secure": false,
  "logLevel": "debug",
  "pathRewrite": {
    "^/api/auth": ""
  },
  "changeOrigin": true
}))

app.use(proxy("/api/auth/token/refresh", {
  "target": "<TARGET>",
  "secure": false,
  "logLevel": "debug",
  "pathRewrite": {
    "^/api/auth": ""
  },
  "changeOrigin": true
}))

app.use(proxy("/api/loans", {
  "target": "<TARGET>",
  "secure": false,
  "logLevel": "debug",
  "changeOrigin": true
}))

app.use(proxy("/api/am", {
  "target": "<TARGET>",
  "secure": false,
  "logLevel": "debug",
  "changeOrigin": true
}))

app.use(proxy("/api/products", {
  "target": "<TARGET>",
  "secure": false,
  "logLevel": "debug",
  "changeOrigin": true
}))

app.listen(3000);

I’m having the same issue while with the following config for Webpack dev server :

proxy: {
    '*': {
      target: 'https://laravel.test',
      secure: false,
      changeOrigin: true,
      headers: { Connection: 'keep-alive' },
    },
},

From what I’ve understood in the above comments, the solution is to remove body parser middleware, but I have no idea how to do that in Webpack config.

Anyone cool help me with that ? Thank you 😄

I got this error because I forgot the schema (http:// or https://) in front of the proxy target address. Maybe someone finds that helpful.

All the suggestions here are saying to remove body parser middleware if you don’t need it, but what if you do need it because your application is posting request bodies?

What’s the actual cause of this issue? I’m using https://www.npmjs.com/package/koa rather than Express with https://www.npmjs.com/package/koa-bodyparser to parse bodies.

Any workarounds I can try?

Could someone please elaborate on why removing body parser fix the error? I don’t see why the body parser is resetting the connection?

In my case: My target server is a java server, but I have a php server running on the same 9000 port. They do not conflict when launching because one is ipv4 and another is ipv6.

# lsof -i :9000

So, the following three solutions may work:

1. change to other port like 9001 to avoid confliction.
2. replace localhost with [::1] in your proxy middleware config to proxy request directly to the ipv6 server
3. in /etc/hosts, move up ::1 localhost

I didn’t use anything like bodyParser.json(), basically I’m using HPM and then send static files I read that it was included automatically with express 4? And I still get this error from time to time. Here’s my code:

var proxy = require("http-proxy-middleware");
var app = express();
app.disable('x-powered-by');
let proxyOptions = {
	target: process.env.PROXY_URL,
	changeOrigin: false,
	xfwd: true,
	proxyTimeout: 30000,
};
//disable checking ssl for self-signed cert
if (process.env.NODE_TLS_REJECT_UNAUTHORIZED == "0") {
  proxyOptions.secure = false;
}
app.use("/api", proxy(proxyOptions));
app.use(express.static(LANDING_PAGE));
app.get("/contact", (req, res) => {
  return res.sendFile(path.join(__dirname, "../landing_page/contact.html"));
});
app.get("/", (req, res) => {
  return res.sendFile(path.join(__dirname, "../landing_page/index.html"));
});
app.use((req, res, next) => {
  res.status(404);

  // respond with html page
  if (req.accepts("html")) {
    return res.sendFile(path.join(__dirname, "../landing_page/404.html"));
  }

  // respond with json
  if (req.accepts("json")) {
    res.send({ error: "Not found" });
    return;
  }

  // default to plain-text. send()
  res.type("txt").send("Not found");
});

app.use((error, req, res) => {
  console.error(error.stack);
  res.status(500);
  res.render("error", { error });
});

const port = process.env.PORT || 8888;
const server = app.listen(port, () => {
  console.info(`Listened at http://localhost:${port}`);
});

I’ve tried different options but still no luck. Just couldn’t figure out how to disable body parser.

@chimurai We’ve solved with using nginx

localhost:4200 (angular CLI) -> http-proxy-middleware -> ngnix -> (vpn)