http-proxy-middleware can't handle POST request in next.js

[yjisme]

next.js version: 9.3.1-canary.1

I want to build middle tier server with next.js, so it must proxy all request with api/*.

To achieve this, I add file pages/api/[...args].js to an empty project, and write these simple code:

import { createProxyMiddleware } from "http-proxy-middleware";
export default createProxyMiddleware({
  target: "http://yuanjin.tech:5100", //the data server
  changeOrigin: true
});

After testing, all get requests works well, but all POST requests has problems

# get request workds well
GET http://localhost:3000/api/movie

# post request has problems
POST http://localhost:3000/api/user/login
BODY loginId=xxx&loginPwd=xxx

# console info
API resolved without sending a response for /api/user/login, this may result in stalled requests.

When this error occurs, my data server does not actually receive any requests

Then i have found any request with body has same problem, even GET request

I don't know why the proxy request can't reach the data server, did i miss something?

[timneutkens]

I assume it's related to automatic body parsing:

You can disable it using the config options outlined here: https://nextjs.org/docs/api-routes/api-middlewares#custom-config

[yjisme]

Thanks for answering, it workds!

[yjisme]

I guess next.js parse the body, it used request stream, so http-proxy-middleware can't read it again (the event data and end can't emit)

Is that the reason all these happed? Thanks again!

[timneutkens]

I believe so yeah!

[lionelB]

Hello,
I'm figuring this kind of problem except I can't make it work :/
I have some route in /api and I would like to proxy request from api/graphql to my real graphql endpoint.
Initially, I had a working solution implying a custom server but since custom server as some downside (also no .env support) I would like to know if it's possible to do that inside api route.

For instance here is my /api/graphql api route

import { createProxyMiddleware } from "http-proxy-middleware";

const proxy = createProxyMiddleware({
  target: process.env.GRAPHQL_ENDPOINT, 
  pathRewrite: { "^/graphql": "/v1/graphql" }, 
  // some other config
  ws: true, // proxy websockets
});

export default proxy;

Is it something doable ? I I should go with the custom server ?

[timneutkens]

See the above answer: #11036 (comment)

import { createProxyMiddleware } from "http-proxy-middleware";

export const config = {
  api: {
    bodyParser: false,
  },
}

const proxy = createProxyMiddleware({
  target: process.env.GRAPHQL_ENDPOINT, 
  pathRewrite: { "^/graphql": "/v1/graphql" }, 
  // some other config
  ws: true, // proxy websockets
});

export default proxy;

[lionelB]

thanks @timneutkens i was setting the next.config which was not working at all

[alex-rhodes]

Sorry to revive this, but this doesn't work for me. I get an error: Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

[ats1999]

This worked for me, thanks.

[guven8]

can you please show me how to call this proxy endpoint from the client? I am having to pass the full url to my GraphQLWsLink, but i am getting no response back
GraphQLWsLink( createClient({ url: 'ws://localhost:3000/api/graphql' }) );

if I try to pass just /api/graphql it throws an error

[steveswork]

@alex-rhodes, without any other info, I would say to wait for your server api call to complete. Convert the function that makes the api call into an async function and prepend the await keyword to the api call invocation or use the old promise api to wait for the call to finish. After that, you will get your data.

Then you might wind up with the "API resolved without sending a response..." message in the console if you're using the http-proxy-middleware. That is just because the creators of that middleware have not addressed that particular issue - it is an annoying cosmetic problem at best. You can chose to ignore it for now. The middleware itself does the actual job it was created to do rather well.

[JackZheng10]

You can get rid of that API resolved warning with the externalResolver flag in your config: https://nextjs.org/docs/api-routes/api-middlewares

[ahmadsdn]

Hey all,
I'm new to nextjs. I have an express api server which I want to proxy /api calls to.
As far as I know there are two ways of doing this, one like OP's way, proxying requests in api routes. And the other with custom server.js file.
I just wonder which approach is better? I feel the former is safer and is much more convenient.
Are there any cons/pros of using each? Which is the recommended approach?
Thanks.

[FDiskas]

I would like to let nextjs to handle his node server with all his features.

[FDiskas]

Also there is another way to do is add rewrite to config
https://nextjs.org/docs/api-reference/next.config.js/rewrites