Form parameters are not passed to the express app while using http-proxy-middleware

Question

This is a very specific problem, and probably hard to describe / understand. I dont know, how much input you need, so i will describe my whole architecture first: Im currently programming my first microservice architecture, im using nodejs, the express framework, handlebars for ui and http-proxy-middleware to create a network.

Each service starts at a random port. The services then register at the api-gateway. The api-gateway routes urls like "/api/web/[service]/[rest]" to "localhost:[serviceport]/[rest]" (that means the webapi-gateway routes the /[rest] request to the service on the registered service port". To run the whole frontend on the normal port 80, I then created a proxy, which routes all requests starting with "/api" to the previous defined gateway. For both of these redirects I am using http-proxy-middleware:

this.app.use(rewritePath,
            this.proxy({
                target: "http://localhost:" + port,
                changeOrigin: true,
                pathRewrite: (path, req) => {
                    console.log(path);
                    var split = path.split("/");
                    split = split.splice(2, split.length);
                    split = split.join("/");
                    if (!split.startsWith("/")) {
                        split = "/" + split;
                    }
                    console.log(path + " to -> localhost:" + port + split);

                    return split;
                }
            })
        );

I dont need comments on that code, its just for a better understanding. All in all: it works.

I am using the Insomnia REST client so to test the systems. I have an auth service, which is used to authenticate a user. I can pass the post request "localhost/api/web/auth/login" with the body parameters

{
    "username":"user",
    "password":"test"
}

and I am getting a 200 Response, that it works.

Now to my problem: I created a frontend showing the form:

<form action="/api/web/auth/login" method="post">
   <input name="username" type="text" placeholder="Username" required>
   <input name="password" type="password" placeholder="Password" required>
   <input type="submit" value="Log in">
</form>

When I post the form, the auth service receives the request, but the request body is empty. Why is the request body empty when using the website, while it works when I am using the REST client?

Vincentklw Vincentklw · Accepted Answer · 2020-02-21T12:51:30

SOLUTION:

In the rest client I used json encoded data, while the form submitted formdata encoded data. I added the

this.app.use(bodyParser.urlencoded({ extended: true }));

middleware to the app. After that I encountered, that http-proxy-middleware and the bodyParser dont work well together as stated here: https://github.com/chimurai/http-proxy-middleware/issues/320.

I resolved the problem using the coexist-parser-proxy (https://github.com/stuartZhang/coexist-parser-proxy (also proposed here: https://github.com/chimurai/http-proxy-middleware/issues/320#issuecomment-570889127))

Form parameters are not passed to the express app while using http-proxy-middleware

2 Answers