Using cors package in middleware
Unanswered
Singapura posted this in #help-forum
SingapuraOP
I'm trying to migrate a custom server to Next.js 14 middleware. We have a bunch of routes like:
I'm having a tough time figuring out how this should look in middleware, but it seems like this should work?
I may be missing something.
server.use('/graphql', cors())
I'm having a tough time figuring out how this should look in middleware, but it seems like this should work?
import { NextResponse } from 'next/server'
import cors from 'cors'
export async function middleware(request) {
return NextResponse.next(cors())
}
export const config = {
matcher: '/graphql',
}
I may be missing something.
6 Replies
no, the
to set up cors headers, you have many options:
* app-wide: [next.config.js](https://nextjs.org/docs/app/api-reference/next-config-js/headers#cors)
* app-wide but costlier but more configurable: [middleware](https://nextjs.org/docs/app/building-your-application/routing/middleware#cors)
* per-route: [route handler](https://nextjs.org/docs/app/building-your-application/routing/route-handlers#cors)
cors
package is for express which follows an entirely different system.to set up cors headers, you have many options:
* app-wide: [next.config.js](https://nextjs.org/docs/app/api-reference/next-config-js/headers#cors)
* app-wide but costlier but more configurable: [middleware](https://nextjs.org/docs/app/building-your-application/routing/middleware#cors)
* per-route: [route handler](https://nextjs.org/docs/app/building-your-application/routing/route-handlers#cors)
SingapuraOP
Thanks! So my understanding from the docs is that with next.config or middleware you have to manually enter all the header information yourself. There's a GitHub example using the Cors package in api routes but that's maybe not ideal for my case: https://github.com/vercel/next.js/blob/canary/examples/api-routes-cors/pages/api/cors.ts.
I have a related question regarding proxies. My existing code base uses
Additionally, although we're technically using Next.js 12 right now, our code base is pretty old. We still use https://www.npmjs.com/package/next-routes which basically intercepts all client and server side routes (AFAIK) and basically rewrites the URLs. Do you know if there's a recommended example for how to refactor from next-routes to the new routing? I think it's going to involve heavy use of next.config
I have a related question regarding proxies. My existing code base uses
Http-Proxy
and there's a next-specific package https://www.npmjs.com/package/next-http-proxy-middleware. However, it mentions that you should use next.config if you can, specifically async rewrites()
. Is that generally the recommended path for proxying requests?Additionally, although we're technically using Next.js 12 right now, our code base is pretty old. We still use https://www.npmjs.com/package/next-routes which basically intercepts all client and server side routes (AFAIK) and basically rewrites the URLs. Do you know if there's a recommended example for how to refactor from next-routes to the new routing? I think it's going to involve heavy use of next.config
rewrites()
but I'd appreciate a nudge in the right direction if available.SingapuraOP
Also, in terms of proxying requests using
I would guess I'll have to use a Route Handler inside
I have several other proxy endpoints on the custom server that I'll need to refactor this way. The annoying thing is that I'll also have to add rewrites in next.config to intercept requests to the old proxy endpoints and forward the new route handlers which will have
rewrites()
, can you send data this way? My use case is that we have a custom Express server that takes POST requests at /graphql
and proxies them to a backend graphql server: server.post(
'/graphql',
proxy({
changeOrigin: true,
logLevel: 'debug',
target: process.env.GRAPHQL_USE_LOCAL
? 'http://localhost:4444/development'
: process.env.GRAPHQL_API_BASE || getGraphqlApi()
})
)
I would guess I'll have to use a Route Handler inside
/app
to do this now? I've seen some examples using http-proxy (Express) middleware inside route handlers so this might have to be the approach.I have several other proxy endpoints on the custom server that I'll need to refactor this way. The annoying thing is that I'll also have to add rewrites in next.config to intercept requests to the old proxy endpoints and forward the new route handlers which will have
/api
prepended to them now.SingapuraOP
Actually, looking at the docs further it sounds like this could possibly be done with rewrites after all. The only problem is that that won't apply any of the http-proxy-middleware options (like
changeOrigin: true
above). Some of my other proxies use additional features from that package like onProxyRes
. I'd guess Next doesn't have an equivalent built inoh so you are using 12, my answer above assumes you use 14 or 15.
about proxies, rewrites are the recommended option in nextjs. i have never heard of the packages you mentioned before – and whenever i need to set up a proxy, nextjs rewrites have served me well. once again you can do this in either next.config.js or middleware, depending on how much configurability and cost you would like to have.
cors
is indeed compatible with pages router api routes, so if you only need to enable it for one single route, you can use it. though you can probably imagine that replicating that boilerplate for all routes is too repetitive. so in terms of CORS, i still recommend setting the headers via next.config.js and/or middleware so that it has app-wide coverage.about proxies, rewrites are the recommended option in nextjs. i have never heard of the packages you mentioned before – and whenever i need to set up a proxy, nextjs rewrites have served me well. once again you can do this in either next.config.js or middleware, depending on how much configurability and cost you would like to have.
SingapuraOP
Sorry what's going on is we're on 12 but trying to upgrade to 14