Open Smolya opened 10 months ago
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.
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.
Same issue here
same
+1
+1
+1
+1
+1
+1
+1
+1
+1
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.
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.
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:
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 aIncomingMessage
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 droppedhttp-proxy-middleware
in favor of a more "native" NextJS solution: with amiddleware
andrewrites
.The logic is as follow: Every time a request starting with
/api
is made, themiddleware
will update it as needed and then therewrites
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
I am also getting the same error.
If we do this then source: "/api/:path*",
will replace every route. What if I want it to behave exactly like a catch-all route e.g. if some x
path does not match then rewrites happen? Would appreciate your response.
Checks
http-proxy-middleware
.Describe the bug (be clear and concise)
I'm using App Router (next 13) and trying to proxy requests on another server via createProxyMiddleware. But I've got an error by doing this. I use example from https://github.com/chimurai/http-proxy-middleware/blob/master/recipes/servers.md#nextjs, but fitted to a new App Routes with GET and POST handlers Error:
Step-by-step reproduction instructions
- api/internal/[...path]/route.ts
Client call:
Expected behavior (be clear and concise)
Handle proxied requests via Next 13 (App Router)
How is http-proxy-middleware used in your project?
What http-proxy-middleware configuration are you using?
What OS/version and node/version are you seeing the problem?