How to properly implement CORs for API routes - App Directory + Middleware

[jacobawebb]

Summary

I have two applications running on localhost.

One is running on :1200, the other is :1201.

When I make an API request from one application to the other without any CORs configuration I get the following:

Access to fetch at 'http://localhost:1201/api/thing' from origin 'http://localhost:1200' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. 

This is expected as it's a request coming from a different origin than the origin of the endpoint being requested.

There seem to be 3 options to implement / adjust CORs to allow for specific or all origins:

1. next.config.js https://nextjs.org/docs/app/api-reference/next-config-js/headers
2. Middleware https://nextjs.org/docs/app/building-your-application/routing/middleware#setting-headers
3. Set the headers on the endpoint e.g. /api/thing

They all follow slightly different approaches syntactically but all pretty much work the same way. As I prefer to use Middleware for this sort of thing, this is what my attempt looks like:

import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";

export async function middleware(req: NextRequest) {
  if (req.nextUrl.pathname.startsWith("/api")) {
    
    const res = NextResponse.next()

    res.headers.append('Access-Control-Allow-Credentials', "true")
    res.headers.append('Access-Control-Allow-Origin', '*')
    res.headers.append('Access-Control-Allow-Methods', 'GET,DELETE,PATCH,POST,PUT,OPTIONS')
    res.headers.append(
      'Access-Control-Allow-Headers',
      'X-CSRF-Token, X-Requested-With, Authorisation, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
    )
    return res
  } 
}

export const config = {
  matcher: "/((?!_next/static|_next/image|favicon.ico|login|setup).*)",
};

This middleware is running on both :1200 and :1201, they have the same CORs setup.

If I now reattempt to make this API request, the result is now the following:

Access to fetch at 'http://localhost:1201/api/instance' from origin 'http://localhost:1200' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

This is progress, but still not the desired result.

What's missing? Is this a bug? Is this user error? Is this lack of docs?

Additional information

No response

Example

No response

[icyJoseph]

In your browser dev tools, the network most likely has an OPTIONS request that goes to /api/instance, which is not having a 200.

Could you control that you don't reject requests based on the method?

[jacobawebb]

My apologies, I meant preflight not prefetch :D

[icyJoseph]

But I guess if its getting 405, then you probably need to define the OPTIONS handler in the API, and just return 200? (do some check on it maybe?)

[jacobawebb]

I've just added this to my endpoint and still get a different error but I know what this one is (I think)

export const OPTIONS = async (request: NextRequest) => {
  return new NextResponse('', {
    status: 200
  })
}

Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

[icyJoseph]

Is it that the Access-Control-Allow-Headers has to allow itself or something like that?

[jacobawebb]

I'm not sure to be honest, I have

    res.headers.append(
      'Access-Control-Allow-Headers',
      'X-CSRF-Token, X-Requested-With, Authorisation, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version'
    )

In my middleware but it's either case sensitive or not picking it up.
Also looking it has a z being sent but CORs only allows Authorisation with an s.

[jacobawebb]

@icyJoseph helped point out what the issue was. To summarise with an example:

My endpoint being requested only had a PUT handler, because that's all I needed at the time.

Because preflight will make an OPTIONS request to the same endpoint, if there's no OPTIONS handler then CORs fails.

Before:

export const PUT = async (request: NextRequest) => {
    // Handle PUT request here
}

After:

export const PUT = async (request: NextRequest) => {
    // Handle PUT request here
}

export const OPTIONS = async (request: NextRequest) => {
  return new NextResponse('', {
    status: 200
  })
}

I wasn't sure what to put for the body of the OPTIONS handler but the answer serves its purpose.

[IhsenBouallegue]

I swear to god, I was going crazy because of this CORS. Thank you kind sir 🙏

[nicope]

I hope everyone having this problem gets this right away, I spend 4 hours fighting cors until I found this

[DplAzim]

where to add this

[Mifayo]

Thanks man works perfectly

[Mifayo]

where to add this

add it in route file in the bottom

export const OPTIONS = async () => { return new NextResponse('', { status: 200 }) }