Closed djleonskennedy closed 7 years ago
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 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 problem with local environment
Glad you've found an answer. Care to share the cause and solution?
@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 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 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
.
use ip replace "localhost" . i am success,you can try
@yuankui thank you for saving my life!
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
Yup, body-parser was the cause for me!
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
Can someone please show me how to remove body-parser before using HPM?
@kiennguyen1101 Look for a line that looks like app.use(bodyParser.json())
or similar
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.
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
Try this:
Replace localhost
with [::1]
Old config:
target: 'http://localhost:' + applicationPort,
New config:
target: 'http://[::1]:' + applicationPort,
Works for me!
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?
I got this error because I forgot the schema (http:// or https://) in front of the proxy target address. Maybe someone finds that helpful.
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 localhost
Could someone please elaborate on why removing body parser fix the error? I don't see why the body parser is resetting the connection?
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?
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'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 😄
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)
I fixed the issue with this approach https://github.com/chimurai/http-proxy-middleware/issues/40#issuecomment-249430255
it's working
removing the express body-parser middleware solved this issue for me.
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.
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__ https://github.com/netlify/create-react-app-lambda/issues/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 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 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证书是否过期
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
Expected behavior
make proxy request
Actual behavior
make proxy request unstable
Setup
proxy middleware configuration
server mounting
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
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