[HPM] Error occurred while trying to proxy request

[djleonskennedy]

Expected behavior

make proxy request

Actual behavior

make proxy request unstable

Setup

• http-proxy-middleware: 0.17.1
• server: webpack -dev-server: 2.3.0

proxy middleware configuration

https://gist.github.com/djleonskennedy/e0521313bc6229d32b006e6d236c4ea3

server mounting

https://webpack.github.io/docs/webpack-dev-server.html#proxy

Hello this issue more about clarification, i have regular proxy to redirect requests to avoid CORS
however also we need to be connected to customer VPN, and sometimes we have proxy worked and sometimes we have next

[HPM] Error occurred while trying to proxy request /login from localhost:4200 to <TARGET> (ETIMEDOUT) (https://nodejs.org/api/errors.html#errors_common_system_errors)

but without proxy TARGET endpoint works well always so we've decided that it can be problem with proxying some, could you please clarify about it?

Might i need to add some configuration?

Thank you

[chimurai]

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);

[djleonskennedy]

@chimurai Thank you for answer, TARGET is internal customer url that works if access to it directly (without proxy)

I'll try express + http-proxy-middleware, and let you know as fast as i'll try

Thank you

[djleonskennedy]

@chimurai problem with local environment

[chimurai]

Glad you've found an answer.
Care to share the cause and solution?

[djleonskennedy]

@chimurai We've solved with using nginx

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

[AndriiDidkivsky]

Yeah, we've not configured our application just with http-proxy-middleware
So it's perhaps your issue.

It would be great to solve that problem just with one proxy :)

[chimurai]

Using multiple proxies is indeed not ideal.

Can you provide an isolated example in which this issue is reproducible?

I'll be happy to dive into it and see if it is an issue with HPM.

[AndriiDidkivsky]

You can go to our office and we'll show you. :)
There is only one case to reproduce. VPN connection to environment and proxy server to some API.

Can you provide an isolated example in which this issue is reproducible?

Do you know any services where we can use vpn + proxy to provide an isolated example ?
I might try to create an small example for you in this case.

[chimurai]

Do you know any services where we can use vpn + proxy to provide an isolated example ?

Not aware of any currently.

Would be nice if you could spend some small effort to debug the issue.

[djleonskennedy]

@chimurai According to my little investigation this is scenario with response delay from vpn connection.

When i do request it goes throw proxy to nginx (in our current solution), if i'm not wrong HPM receives success response from nginx so HPM doesn't fails.

nging waits for response from server (which is under vpn).
It can be long response, even for 2 minutes

before using nginx

I've tried option.proxyTimeout however it didn't help, migth i've made something whrong, but you can try to reproduce it with vpn and long responce emulation.

Regards

[wmzy]

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.

[yuankui]

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"
        },
    }));
};

[lkaratun]

@wmzy I tried your solution (removed body-parser from the express app) and it worked, but I don't understand how the app is still working without body-parser. Isn't it required with express v.4+?(I was testing with express version 4.12.2)

[wmzy]

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.

[MrRabbit1993]

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

[jacketwpbb]

@yuankui thank you for saving my life!

[asadullahmusavi]

I use Linux Ubuntu OS

I have the same problem, in my node, vue project.
I found that use (res.send) from the server to avoid the error

[nelsonomuto]

Yup, body-parser was the cause for me!

[fouad-j]

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"
        },
    }));
};

I got the same error using (vue.js, webpack-dev-server and http-proxy-middleware).

proxy does not forward 'connection: keep-alive' option.

i didn't investigate more why, but adding this option fixed my issue

but thank you @yuankui

[kiennguyen1101]

Can someone please show me how to remove body-parser before using HPM?

[lkaratun]

@kiennguyen1101 Look for a line that looks like app.use(bodyParser.json()) or similar

[kiennguyen1101]

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.

[abhilash4637]

Hi everyone,
@yuankui
I have the following setup in my code , everything works fine when i am on LAN , but it gives me 504 gateway time out error when i am on wifi .
any suggestions

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
app.use(proxy('/metadata',
{
target: 'https://portal-api.dv.com',
secure: false,
changeOrigin: true,
https: true
}
));

app.use(proxy('/ppe',
{
target: 'https://portal-api.dv.com',
secure: false,
changeOrigin: true,
https: true
}
));

app.use(proxy('/product',
{
target: 'https://portal-api.dv.com',
secure: false,
changeOrigin: true,
https: true
}
));

app.use(proxy('/client-roster',
{
target: 'https://portal-api.dv.com',
secure: false,
changeOrigin: true,
https: true
}
));
};
@djleonskennedy @chimurai @AndriiDidkivsky @yuankui
please help

[ljwagerfield]

Try this:

Replace localhost with [::1]

Old config:

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

New config:

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

Works for me!

[rightaway]

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?

[GerbenRampaart]

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

[zzz945]

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`

[SgSridhar]

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

[chan-dev]

Try this:

Replace localhost with [::1]

Old config:

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

New config:

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

Works for me!

Replacing localhost to ::1 worked for me but why? Can anyone explain why this worked?

[gmahe]

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.

[jimblue]

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 😄

[sindevil]

still have this problem,why ?
[HPM] Error occurred while trying to proxy request // from localhost:8081 to https://localhost:8443 (CERT_HAS_EXPIRED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

[alfonsomartinde]

I fixed the issue with this approach
#40 (comment)

[ShravanMeena]

it's working

[ashrakrahman]

removing the express body-parser middleware solved this issue for me.

[prajwalmachado]

Replacing localhost to ::1 worked for me but why? Can anyone explain why this worked? @chan-dev

This is because ping on Windows Vista and newer Windows uses IPv6 by default when available. ::1 is a shortened notation of IPv6 loopback address - equivalent of IPv4 loopback 127.0.0.1.

The full notation of the abbreviated ::1 IPv6 address is 0000:0000:0000:0000:0000:0000:0000:0001.

[philip-nicholls]

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

[asnow73]

In my case changing version of wsl (windows subsystem for linux) helps. With version 2 error disappered

[SuperTapir]

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"
        },
    }));
};

OMG, thank you. It works.

[mdelorimier]

Having an issue similar to this one our solution was to allow the port with SELinux

semanage port -a -t http_port_t -p tcp 3005

https://blog.ijun.org/2014/11/selinux-allow-httpd-to-connect-to.html

[supriome]

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"
        },
    }));
};

Thank you very much. It works.

[RichardTMiles]

Tired many configurations, mine is quite unique. I use the hosts files to rewrite my domains from the typical 127.0.0.1, [::1], or localhost. I also have a build directory that will, more-or-less, generate a unique site based on the host path. I didn't need to change my host file but will include it as including ipv6 is becoming a necessity. While the initial 'target' will be replaced every time it seems it may need to be in the same IPV-Protocol as ... well speculation aside removing localhost, [::1], and keeping 127.0.0.1 did the job for me. I would experiment with this discovery

➜  web git:(richard) ✗ cat /etc/hosts
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost local.example.org local.example2.com local.example.com local.example.gg local.dropingaming.co
255.255.255.255 broadcasthost
::1             localhost local.example.com local.example.com local.example.gg

const proxyTable = {
    'local.example.com:3000': 'http://local.example.com:8080/', // host only
    'local.example.co:3000': 'http://local.example.co:8080/', // host only
    'local.example.gg:3000': 'http://local.example.gg:8080/'
};

const options = {
    target: 'http://127.0.0.1:8080',
    router: proxyTable,
    changeOrigin: true,
    secure: false,
    // ws: true,
    proxyTimeout: 17000,
    logLevel: "debug",
    headers: {
        "Connection": "keep-alive"
    },
};

module.exports = function (app) {

    /**
     * @link https://stackoverflow.com/questions/56571972/how-to-proxy-to-many-different-targets-using-http-proxy-middleware
     * @link https://github.com/chimurai/http-proxy-middleware/blob/master/recipes/router.md
     **/
    app.use('/cart/**', createProxyMiddleware(options));
    
    ...
}

__UPDATE
netlify/create-react-app-lambda#19

restart your computer

^ sounds silly works often

[fatemeh-web]

i still have problem and i did everything but not working yet. and this is my configeration: my front port is 5000 and backend is 3000:80

devServer: {
hot: true,
port: 5000,
host:"0.0.0.0",
proxy: {
'/looxgraphics': {
target: 'http://0.0.0.0:3000',
secure: false,
logLevel: 'debug',
changeOrigin: true,
pathRewrite: { '^/looxgraphics': '' },
ws: true,
}
},

},

[callumgare]

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

[mnpenner]

I tried #171 (comment), 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}`
            }],

[ObaidAshiq]

For me my localhost works but not the production
I have 3 ports
1 st is for prozy
2nd doesnt work with proxy
3rd works like a charm

[biletboh]

If you use nestjs, you can disable body parser like this:

const app = await NestFactory.create(ApplicationModule, {
  bodyParser: false,
});

[TuKun33]

如果你是https协议，检查一下ssl证书是否过期

[tanujwg]

Hi everyone, @yuankui I have the following setup in my code , everything works fine when i am on LAN , but it gives me 504 gateway time out error when i am on wifi . any suggestions

const proxy = require('http-proxy-middleware');

module.exports = function(app) { app.use(proxy('/metadata', { target: 'https://portal-api.dv.com', secure: false, changeOrigin: true, https: true } ));

app.use(proxy('/ppe', { target: 'https://portal-api.dv.com', secure: false, changeOrigin: true, https: true } ));

app.use(proxy('/product', { target: 'https://portal-api.dv.com', secure: false, changeOrigin: true, https: true } ));

app.use(proxy('/client-roster', { target: 'https://portal-api.dv.com', secure: false, changeOrigin: true, https: true } )); }; @djleonskennedy @chimurai @AndriiDidkivsky @yuankui please help

I am having same issue, anyone has any solution