http-proxy-middleware does not forward any of the path

[jacknugent]

Describe the bug

I am trying to configure a proxy for my API requests using http-proxy-middleware, which the create react app docs suggest. I set up my proxy like this, in the setupProxy.js file:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
    app.use(
        createProxyMiddleware("/post", {
            target: 'https://postman-echo.com',
            changeOrigin: true,
            logLevel: 'debug'
        })
    );
};

After registering a proxy, I do a simple POST to an endpoint:

const response = await fetch("api/post", {
  method: 'POST',
  headers: {
    'content-type': 'application/json;charset=UTF-8'
  },
  body: JSON.stringify({ foo1: "bar1", foo2: "bar2" })
});

The debugger shows this proxy when I run a fetch:

[HPM] POST /post -> https://postman-echo.com

My client gets a 404 error because https://postman-echo.com on its own does not match anything on the backend. The path /post is being left out.

This looks similar to this issue but they are not the same (I am using the same syntax as the answer suggests).

Did you try recovering your dependencies?

Yes.

middleware-proxy-bug@0.1.0 /Users/jack/Documents/middleware-proxy-bug
├── http-proxy-middleware@2.0.1
└─┬ react-scripts@4.0.3
└─┬ webpack-dev-server@3.11.1
└── http-proxy-middleware@0.19.1

npm version: 7.19.1

Which terms did you search for in User Guide?

Implemented proxying based on the create react app docs.

Environment

Environment Info:

current version of create-react-app: 4.0.3
running from /Users/jack/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

System:
OS: macOS 10.15.7
CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
Binaries:
Node: 16.5.0 - /usr/local/bin/node
Yarn: Not Found
npm: 7.19.1 - /usr/local/bin/npm
Browsers:
Chrome: 92.0.4515.159
Edge: Not Found
Firefox: 91.0.1
Safari: 14.1.2
npmPackages:
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
react-scripts: 4.0.3 => 4.0.3
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

1. Clone my repo
2. Run npm install then npm start
3. Click the "Send Request" button and view the logs

Expected behavior

According to the http-proxy-middleware docs, I should expect a proxy that does something like this:

[HPM] POST /post -> https://postman-echo.com/post

And that should not 404, because that endpoint works with a curl request:

curl -X POST -F 'foo1=bar1' -F 'foo2=bar2' https://postman-echo.com/post

{"args":{},"data":{},"files":{},"form":{"foo1":"bar1","foo2":"bar2"},"headers":{"x-forwarded-proto":"https","x-forwarded-port":"443","host":"postman-echo.com","x-amzn-trace-id":"Root=1-61200bc6-1ada21835b562050130b822b","content-length":"240","user-agent":"curl/7.64.1","accept":"*/*","content-type":"multipart/form-data; boundary=------------------------95637afe71c60a09"},"json":null,"url":"https://postman-echo.com/post"}%         

Actual behavior

The path, /post, does not get appended to the proxy request. The target should actually be https://postman-echo.com/post.

Reproducible demo

1. Clone my repo
2. Run npm install then npm start
3. Click the "Send Request" button and view the logs

[jacknugent]

Nevermind, the problem was that my endpoint was wrong originally (I was trying to hit https://postman-echo.com/api/post when I should have been hitting https://postman-echo.com/post). With the correct endpoint, it does not 404.