Next.js App Router can't handle proxied requests about http-proxy-middleware

[liambowers]

If you're about to add a 'I have this issue too, +1' kind of comment, I'd suggest giving the first post a thumbs-up which communicates the same and doesn't spam subscribed users unnecessarily.

[gciluffo]

Same issue here. Had to work around by creating a /pages/api directory adjacent to my app directory in order to get api proxies working.

[jtomaszewski]

I've tried handcrafting it but also failed.

I created app/[...all]/router.ts file with following contents:

import httpProxy from "http-proxy";

export async function GET(request: Request) {
  const proxy: httpProxy = httpProxy.createProxy();
  const response = new Response();

  return new Promise((resolve, reject) => {
    proxy
      .once("proxyRes", resolve)
      .once("error", reject)
      .web(request, response, {
        target: "https://napiachu.pl",
        secure: false,
        changeOrigin: true,
        autoRewrite: true,
        cookieDomainRewrite: "",
      });
  });
}

But it just doesn't work, it raises TypeError: req.on is not a function error.

That's probably because the interface of request & response object is now completely different in app router (request is a node fetch "request" object, not a IncomingMessage class object coming from node http library; and response is simply not existing).

So http-proxy nor http-proxy-middleware can't be used "as is", unless we find some way how we can make it work on top of the new request & response interfaces.

[karbica]

Same. I wish the route segment config, e.g. const runtime = 'nodejs'; (the default btw), would actually pass the supported request and response interfaces. Instead we get the interfaces that would run on the edge and inside the browser which are incompatible with other third-party proxy implementations.

[KakkoiDev]

I've tried handcrafting it but also failed.

I created app/[...all]/router.ts file with following contents:

import httpProxy from "http-proxy";

export async function GET(request: Request) {
  const proxy: httpProxy = httpProxy.createProxy();
  const response = new Response();

  return new Promise((resolve, reject) => {
    proxy
      .once("proxyRes", resolve)
      .once("error", reject)
      .web(request, response, {
        target: "https://napiachu.pl",
        secure: false,
        changeOrigin: true,
        autoRewrite: true,
        cookieDomainRewrite: "",
      });
  });
}

But it just doesn't work, it raises TypeError: req.on is not a function error.

That's probably because the interface of request & response object is now completely different in app router (request is a node fetch "request" object, not a IncomingMessage class object coming from node http library; and response is simply not existing).

So http-proxy nor http-proxy-middleware can't be used "as is", unless we find some way how we can make it work on top of the new request & response interfaces.

After trying for a while I was still getting the TypeError: req.on is not a function error. So I finally dropped http-proxy-middleware in favor of a more "native" NextJS solution: with a middleware and rewrites.

The logic is as follow: Every time a request starting with /api is made, the middleware will update it as needed and then the rewrites will proxy it to the desired destination.

middleware.ts

// imports...

export async function middleware(request: NextRequest) {
  // your other middleware actions...

  if (/^\/api/.test(path)) { // if sending a request to /api/...
    const newResponse = NextResponse.next(); // prepare a new response

    // modify your response if needed
    const bearerToken = await getBearerToken();
    newResponse.headers.set("Authorization", "Bearer " + bearerToken);
    // ...

    return newResponse; // return the modified response
  }
}

next.config.js

module.exports = {
  // your other config...
  async rewrites() {
    return [
      {
        source: "/api/:path*", // get everything after /api/
        destination: `${process.env.NEXT_PUBLIC_API_URL}/:path*`, // send it to your API
      },
    ];
  },
}

For more information:

• NextJS Middleware: https://nextjs.org/docs/pages/building-your-application/routing/middleware
• NextJS Rewrites: https://nextjs.org/docs/pages/api-reference/next-config-js/rewrites

[newbeea]

Same issue here

[timmyg]

same

[BhaskaranR]

+1

[stoompa]

+1

[tsunamiShi]

+1

[aaman123]

+1

[tomasguerreiro]

+1

[childbamboo]

+1

[hmvmpire]

+1

[dannydeut]

+1

[villqrd]

+1