Next.js Discord

Discord Forum

Using cors package in middleware

Unanswered
Singapura posted this in #help-forum
Open in Discord
Avatar
SingapuraOP
I'm trying to migrate a custom server to Next.js 14 middleware. We have a bunch of routes like:
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

Avatar
no, the 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)
Avatar
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 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.
Avatar
SingapuraOP
Also, in terms of proxying requests using 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.
Avatar
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 in
Avatar
oh so you are using 12, my answer above assumes you use 14 or 15.

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.
Avatar
SingapuraOP
Sorry what's going on is we're on 12 but trying to upgrade to 14