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

[jacknugent]

yarn why http-proxy-middleware OR npm ls http-proxy-middleware output (mask private folder names with *****)

[email protected] /Users/jack/Documents/middleware-proxy-bug
├── [email protected]
└─┬ [email protected]
  └─┬ [email protected]
    └── [email protected]

• I understand project setup issues should be asked on StackOverflow or in GitHub Discussions.
• I updated to latest http-proxy-middleware.

Describe the bug (be clear and concise)

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("/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).

Step-by-step reproduction instructions

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

Expected behavior (be clear and concise)

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

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

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

What http-proxy-middleware configuration are you using?

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

What OS/version and node/version are you seeing the problem?

MacOS 10.15.7, Node v16.5.0

Additional context (optional)

No response

[chimurai]

https://postman-echo.com/api/post is returning a 404. So I that endpoint you're POSTing to probably does not exist.

Do you have a working curl POST for that endpoint as reference?

[jacknugent]

Nice catch. I updated the post & repo with the correct endpoint. Here is a working curl POST:

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

results

{"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-61200c54-7b5809be3e78040f09edcd42","content-length":"240","user-agent":"curl/7.64.1","accept":"*/*","content-type":"multipart/form-data; boundary=------------------------bb54b419e41f4a4a"},"json":null,"url":"https://postman-echo.com/post"}%   

So even with an endpoint that does not return 404, the original issue persists.

[jacknugent]

Actually, nevermind, it does work now! That was the issue. My repo works now. I guess I got confused that the debugger wasn't showing /post as expected.