[HPM] Error occurred while trying to proxy request

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

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

@chimurai

@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

@chimurai

@chimurai problem with local environment

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

@chimurai

@chimurai We've solved with using nginx

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

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

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.

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.

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.

@chimurai

@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

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

@wmzy

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

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.

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

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

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.

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

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.

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

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

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

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}`
            }],

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

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

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

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

@yuankui

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

Navigation Menu

Repository navigation

[HPM] Error occurred while trying to proxy request #171

Expected behavior

Actual behavior

Setup

proxy middleware configuration

server mounting

22 remaining items

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

[HPM] Error occurred while trying to proxy request #171

Description

Expected behavior

Actual behavior

Setup

proxy middleware configuration

server mounting

Activity

chimurai commented on Jun 15, 2017

djleonskennedy commented on Jun 15, 2017

djleonskennedy commented on Jun 19, 2017

chimurai commented on Jun 19, 2017

djleonskennedy commented on Jun 19, 2017

AndriiDidkivsky commented on Jun 19, 2017

chimurai commented on Jun 19, 2017

AndriiDidkivsky commented on Jun 19, 2017

chimurai commented on Jun 21, 2017

djleonskennedy commented on Jun 29, 2017

wmzy commented on Jan 9, 2018

yuankui commented on Nov 15, 2018

lkaratun commented on Apr 3, 2019

wmzy commented on Apr 4, 2019

22 remaining items

philip-nicholls commented on Sep 14, 2021

asnow73 commented on Sep 15, 2021

SuperTapir commented on Jan 17, 2022

mdelorimier commented on Jan 28, 2022

supriome commented on Mar 26, 2022

RichardTMiles commented on Apr 20, 2022

fatemeh-web commented on May 4, 2022

callumgare commented on Jun 2, 2022

mnpenner commented on Sep 11, 2022

ObaidAshiq commented on Jan 24, 2024

biletboh commented on Feb 13, 2024

TuKun33 commented on Feb 18, 2024

tanujwg commented on Mar 2, 2024

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions