feat: try to proxy body even after body-parser middleware (#492)

* feat: try to keep body even after body-parser middleware

* chore: don't shadow request

* test: set correct form of bodyparser for json

* feat: extract fixRequestBody to external handler

* chore: lint

* chore: pluralise middlewares, silence DeepCode bot

* docs: mention fixRequestBody

* added double byte character test

Co-authored-by: chimurai <[email protected]>

Author: midgleyc

README.md

@@ -69,6 +69,7 @@ _All_ `http-proxy` [options](https://github.com/nodejitsu/node-http-proxy#option
   - [app.use\(path, proxy\)](#appusepath-proxy)
 - [WebSocket](#websocket)
   - [External WebSocket upgrade](#external-websocket-upgrade)
+- [Intercept and manipulate requests](#intercept-and-manipulate-requests)
 - [Intercept and manipulate responses](#intercept-and-manipulate-responses)
 - [Working examples](#working-examples)
 - [Recipes](#recipes)
@@ -482,6 +483,25 @@ const server = app.listen(3000);
 server.on('upgrade', wsProxy.upgrade); // <-- subscribe to http 'upgrade'
 ```
 
+## Intercept and manipulate requests
+
+Intercept requests from downstream by defining `onProxyReq` in `createProxyMiddleware`.
+
+Currently the only pre-provided request interceptor is `fixRequestBody`, which is used to fix proxied POST requests when `bodyParser` is applied before this middleware.
+
+Example:
+
+```javascript
+const { createProxyMiddleware, fixRequestBody } = require('http-proxy-middleware');
+
+const proxy = createProxyMiddleware({
+  /**
+   * Fix bodyParser
+   **/
+  onProxyReq: fixRequestBody,
+});
+```
+
 ## Intercept and manipulate responses
 
 Intercept responses from upstream with `responseInterceptor`. (Make sure to set `selfHandleResponse: true`)

package.json

@@ -60,6 +60,7 @@
     "@types/ws": "^7.4.0",
     "@typescript-eslint/eslint-plugin": "^4.19.0",
     "@typescript-eslint/parser": "^4.19.0",
+    "body-parser": "^1.19.0",
     "browser-sync": "^2.26.14",
     "connect": "^3.7.0",
     "eslint": "^7.23.0",

src/handlers/fix-request-body.ts

@@ -0,0 +1,27 @@
+import { ClientRequest } from 'http';
+import type { Request } from '../types';
+import * as querystring from 'querystring';
+
+/**
+ * Fix proxied body if bodyParser is involved.
+ */
+export function fixRequestBody(proxyReq: ClientRequest, req: Request): void {
+  if (!req.body || !Object.keys(req.body).length) {
+    return;
+  }
+
+  const contentType = proxyReq.getHeader('Content-Type') as string;
+  const writeBody = (bodyData: string) => {
+    // deepcode ignore ContentLengthInCode: bodyParser fix
+    proxyReq.setHeader('Content-Length', Buffer.byteLength(bodyData));
+    proxyReq.write(bodyData);
+  };
+
+  if (contentType.includes('application/json')) {
+    writeBody(JSON.stringify(req.body));
+  }
+
+  if (contentType === 'application/x-www-form-urlencoded') {
+    writeBody(querystring.stringify(req.body));
+  }
+}

src/handlers/public.ts

@@ -1 +1,2 @@
 export { responseInterceptor } from './response-interceptor';
+export { fixRequestBody } from './fix-request-body';

test/e2e/_utils.ts

@@ -1,11 +1,11 @@
 import * as express from 'express';
 import { Express, RequestHandler } from 'express';
 
-export { createProxyMiddleware, responseInterceptor } from '../../dist/index';
+export { createProxyMiddleware, responseInterceptor, fixRequestBody } from '../../dist/index';
 
-export function createApp(middleware: RequestHandler): Express {
+export function createApp(...middlewares: RequestHandler[]): Express {
   const app = express();
-  app.use(middleware);
+  app.use(...middlewares);
   return app;
 }
 

test/e2e/http-proxy-middleware.spec.ts

@@ -1,8 +1,9 @@
-import { createProxyMiddleware, createApp, createAppWithPath } from './_utils';
+import { createProxyMiddleware, createApp, createAppWithPath, fixRequestBody } from './_utils';
 import * as request from 'supertest';
 import { Mockttp, getLocal, CompletedRequest } from 'mockttp';
 import { Request, Response } from '../../src/types';
 import { NextFunction } from 'express';
+import * as bodyParser from 'body-parser';
 
 describe('E2E http-proxy-middleware', () => {
   describe('http-proxy-middleware creation', () => {
@@ -78,6 +79,44 @@ describe('E2E http-proxy-middleware', () => {
       });
     });
 
+    describe('basic setup with configured body-parser', () => {
+      it('should proxy request body from form', async () => {
+        agent = request(
+          createApp(
+            bodyParser.urlencoded({ extended: false }),
+            createProxyMiddleware('/api', {
+              target: `http://localhost:${mockTargetServer.port}`,
+              onProxyReq: fixRequestBody,
+            })
+          )
+        );
+
+        await mockTargetServer.post('/api').thenCallback((req) => {
+          expect(req.body.text).toBe('foo=bar&bar=baz');
+          return { status: 200 };
+        });
+        await agent.post('/api').send('foo=bar').send('bar=baz').expect(200);
+      });
+
+      it('should proxy request body from json', async () => {
+        agent = request(
+          createApp(
+            bodyParser.json(),
+            createProxyMiddleware('/api', {
+              target: `http://localhost:${mockTargetServer.port}`,
+              onProxyReq: fixRequestBody,
+            })
+          )
+        );
+
+        await mockTargetServer.post('/api').thenCallback((req) => {
+          expect(req.body.json).toEqual({ foo: 'bar', bar: 'baz', doubleByte: '文' });
+          return { status: 200 };
+        });
+        await agent.post('/api').send({ foo: 'bar', bar: 'baz', doubleByte: '文' }).expect(200);
+      });
+    });
+
     describe('custom context matcher/filter', () => {
       it('should have response body: "HELLO WEB"', async () => {
         const filter = (path, req) => {

yarn.lock

@@ -1483,7 +1483,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.5.tgz#d680eeef25f8cd91ad533f5b01eed48e64caf683"
   integrity sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==
 
-[email protected], body-parser@^1.15.2:
+[email protected], body-parser@^1.15.2, body-parser@^1.19.0:
   version "1.19.0"
   resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
   integrity sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==