How to enable cors in Nextjs 13 Route Handlers

[L-U-C-K-Y]

Summary

Hi all

I would like to define CORS to allow any origin for development purposes with Nextjs 13 route handlers.

I tried the following options, but they did not work:

In the route handler itself:

  request.headers.set("Access-Control-Allow-Origin", "*");
  request.headers.set("Access-Control-Allow-Methods", "POST");
  request.headers.set("Access-Control-Allow-Headers", "Content-Type");

In next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
    async headers() {
      return [
        {
          // matching all API routes
          // https://vercel.com/guides/how-to-enable-cors
          source: "/api/:path*",
          headers: [
            { key: "Access-Control-Allow-Credentials", value: "true" },
            { key: "Access-Control-Allow-Origin", value: "*" },
            {
              key: "Access-Control-Allow-Methods",
              value: "GET,OPTIONS,PATCH,DELETE,POST,PUT",
            },
            {
              key: "Access-Control-Allow-Headers",
              value:
                "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version",
            },
          ],
        },
      ];
    },
  },
};

module.exports = nextConfig;

Would appreciate any help.

Additional information

No response

Example

No response

[AlexShiresRoth]

I'm also attempting to figure this out. One note, you may want to add the headers function outside of the experimental object.

[nenadpejic]

@L-U-C-K-Y
Try putting the headers fn in the root of the nextConfig object like so:

const nextConfig = {
  experimental: {
    appDir: true,
  },
  async headers() {
    // ...
  },
}

Route handler modification is not needed.

[leerob]

Added an example to the docs:

export async function GET(request: Request) {
  return new Response('Hello, Next.js!', {
    status: 200,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
    }
  });
}

[jgoux]

@oelbaga So there is no middleware approach working? If we want to apply CORS to a lot of routes we have to do it manually in each route handler?

[davecarlson]

What if you are using NextResponse and returning json from the docs for the route handler such as:

return NextResponse.json({ response: responseObject });

The sample above doesn't work with that.

Got a code example? I am literally doing that in > 20 route handlers currently using my example above

[minervabot]

@leerob This example only implements CORS for the most trivial cases. Is there an easy or next-friendly way to handle CORS preflight?

This example works, but is perhaps a bit jaggy: #47933 (comment)

[benjick]

@davecarlson can you show us how you do it?

[zouinekh]

what if i am using NextResponse.redirect i got cors origin error also

[relferreira]

I only got it working with:

export async function GET(request: Request) {
  ...

  return cors(
    request,
    new Response(JSON.stringify(images), {
      status: 200,
      headers: { "Content-Type": "application/json" },
    })
  );
}

export async function OPTIONS(request: Request) {
  return cors(
    request,
    new Response(null, {
      status: 204,
    })
  );
}

The cors.ts was extracted from this example:
https://github.com/vercel/examples/blob/main/edge-functions/cors/lib/cors.ts

[shaun-scale]

With a fresh set of eyes, this is more correct than Lee's initial reply I think. The key is to support the OPTIONS method along with your GET/POST/whatever method. CORS uses the OPTIONS method only for it's check.

[cjmling]

Adding OPTIONS worked for me too and it seems like shaun-scale says. Browser was checking something using OPTIONS method.

[Rieranthony]

Do you guys have exemples of you are doing your query?

I'm using NextAuth with and use wildcards subdomains and I keep having CORS error, even while using this exemple.

My fetch on the frontend:

export async function fetcher<T = any>(
  input: RequestInfo,
  init?: RequestInit
): Promise<T> {
  const headers = new Headers();

  headers.set(
    "Access-Control-Allow-Origin",
    "https://*.mydomain.com, http://*.localtest.me:[3000]"
  );

  const response = await fetch(input, {
    ...init,
    headers,
    mode: "cors",
    credentials: "include",
  });

  const { data, error } = (await response.json()) as {
    data: T;
    error: string | null;
  };

  if (!response.ok || error) {
    throw new Error(error || "Unknown server error");
  }

  return data;
}

I'm out of ideas, if I'm not adding credentials: "include" my sessions aren't forwarded on my API route

Thanks!

[axelvaindal]

I've applied this as well and this works fine 🎊

[minervabot]

The adding "OPTIONS" bit is called the CORS preflight and is almost always required for anything non-trivial. It is triggered by a lot of things, notably using an Authorization header or setting a content-type of application/json. Anything that does not qualify for a "simple request" in this list:

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests

[notnavindu]

Middleware approach did not work for me but this worked

export const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
  "Access-Control-Allow-Headers": "Content-Type, Authorization",
};


export async function OPTIONS(req: NextRequest) {
  return NextResponse.json({}, { headers: corsHeaders });
}

export async function POST(req: NextRequest) {
  // ...

  return NextResponse.json({ foo: "bar" }, { headers: corsHeaders });

}

[davecarlson]

It will, be that's very repetitive in every route.ts, and also you shouldn't use *.

[ameer-clara]

Would have thought next.config.js with headers would work. Seems counter intuitive to add this to every route. Testing chatgpt plugin on localhost via 'Develop your own plugin', GET works (without OPTIONS) but POST fails if the OPTIONS is not added like above. Thanks @notnavindu

[fayez-nazzal]

I have had no issues when adding headers in my next.config.js. Works well.

const getCorsHeaders = () => {
  const headers = {};
  
  headers["Access-Control-Allow-Origin"] = "http://localhost:1420";
  headers["Access-Control-Allow-Credentials"] = "true";
  headers["Access-Control-Allow-Methods"] =
    "GET,OPTIONS,PATCH,DELETE,POST,PUT";
  headers["Access-Control-Allow-Headers"] =
    "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, Authorization";

  return Object.entries(headers).map(([key, value]) => ({ key, value }));
};

const nextConfig = {
  reactStrictMode: true,
  experimental: {
    serverActions: true,
  },
  headers: async () => {
    return [
      {
        source: "/api/(.*)",
        headers: getCorsHeaders(),
      },
    ];
  },
  swcMinify: true,
};

module.exports = withBundleAnalyzer(nextConfig);

[ashbuilds]

This only seem to work with GET methods

[SethY8s]

@leerob I tried your solution and it has gotten rid of my cors errors, however I am trying to only have it work with one of my api routes and I want to specify the allowed origin, however, it seems to be working for all origins. Down below is my next.config

/** @type {import('next').NextConfig} */
const nextConfig = {};

module.exports = {
	experimental: {
		serverActions: true,
	},
	async headers() {
		return [
			{
				source: "/api/stripe/test",
				headers: [
					{ key: "Access-Control-Allow-Credentials", value: "false" },
					{
						key: "Access-Control-Allow-Origin",
						value: "https://www.google.com/",
					},
					{
						key: "Access-Control-Allow-Methods",
						value: "GET,DELETE,PATCH,POST,PUT",
					},
					{
						key: "Access-Control-Allow-Headers",
						value: "Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date",
					},
				],
			},
		];
	},
};

As you can see I am trying to allow my stripe/test route on the domain google.com.(This is only for testing and I will change it to an actual domain once I have it where I want it)

Here is my get request inside /api/stripe/test

export async function GET(request: Request) {
	const origin = request.headers.get("origin");

	console.log("origin", origin);

	return new Response("Hello, Next.js!", {
		status: 200,
		headers: {
			"Access-Control-Allow-Origin": origin,
			"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
			"Access-Control-Allow-Headers": "Content-Type, Authorization",
		},
	});
	// return NextResponse.json(message);
}

Now that I have added this code, I am no longer getting the cors error. The only issue is that I want it to only work for google.com and I tested this on several sights and I am not getting a cors error. The reason why I chose google.com is just for testing, I have other domains I need to add once I am in production. I would also like to specify more than one allow origin in my next.config. Is this possible? Thanks to anyone that can help!

[sadath-12]

This is something that actually works !!

import { NextResponse } from 'next/server'


export const corsHeaders = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
  'Access-Control-Allow-Headers': 'Content-Type, Authorization',
}

export function middleware(request: Request) {
  if (request.method === 'OPTIONS') {
    return NextResponse.json({}, { headers: corsHeaders })
  }
}

export const config = {
  matcher: '/api/:path*',
}

Add this under middleware.ts under app dir

[0xPT]

fails to deploy to vercel due to "

Error: The Edge Function "middleware" is referencing unsupported modules:

20:45:46.096 | - next: stream, fs, url, path

"

For me.

[buretto]

This wasn't working for me. I needed to add the CORS headers to the POST request as well as the OPTIONS request. So my middleware looks like:

export const corsHeaders = {
  "Access-Control-Allow-Origin": "http://localhost:19006",
  "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
  "Access-Control-Allow-Headers": "Content-Type, Authorization",
};


export async function middleware(request: NextRequest) {
  const response = NextResponse.next()

  if (request.method === 'OPTIONS') {
    return NextResponse.json({}, {headers: corsHeaders})
  }

  response.headers.append("Access-Control-Allow-Origin", corsHeaders['Access-Control-Allow-Origin'])
  response.headers.append("Access-Control-Allow-Methods", corsHeaders['Access-Control-Allow-Methods'])
  response.headers.append("Access-Control-Allow-Headers", corsHeaders['Access-Control-Allow-Headers'])
  
  // Further middleware processing here
  
  return response;
}

Someone can probably clean it up better.
I was confused for hours, so thanks to Phil for helping me figure it out.
Few more details over here:
https://stackoverflow.com/questions/77392920/what-is-the-reason-for-my-post-api-route-handler-failing

[Mandy9943]

the solutions above are not working for me with POST

[Mandy9943]

the solutions above are not working for me with POST

[minervabot]

There are a lot of solutions above. Which one did you try?

[leetesla]

I solved this just by adding and setting up the OPTIONS method. Here is the code:

export async function POST(req: Request){
// your code here
...
}

// Add and setting up the OPTIONS method
export async function OPTIONS(request: Request) {
  const corsHeaders = {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
    'Access-Control-Allow-Headers': 'Content-Type, Authorization',
  }
  return new Response(null, {
    status: 204,
    headers:corsHeaders
  });
}

[cfirdayantij]

thanks for the solution, it works for me..

[SiTribal]

this worked for me in middleware.ts

//set your chosen whitelisted origins here
const allowedOrigins =
  process.env.NODE_ENV === "production"
    ? [
        "https://www.yoursite.com",
        "https://yoursite.com",
        "https://www.google.com",
      ]
    : ["http://localhost:3000", "https://www.google.com"];

export function middleware(request: Request) {
  const origin = request.headers.get("origin");

  if (origin && !allowedOrigins.includes(origin)) {
    return new Error("Invalid origin"), { status: 403 };
  }
  const response = NextResponse.next({
    request: {
      ...request,
      headers: request.headers,
    },
  });

  response.headers.set("Access-Control-Allow-Origin", "*");
  response.headers.set(
    "Access-Control-Allow-Methods",
    "GET, POST, PUT, DELETE, OPTIONS"
  );
  response.headers.set(
    "Access-Control-Allow-Headers",
    "Content-Type, Authorization"
  );

  return response;
}

export const config = {
  matcher: "/api/:path*",
};

[tomelliot]

I've run into this issue several different times. According to the documentation you can just set the relevant headers in next.config.js:

// If OPTIONS is not defined, Next.js will automatically implement OPTIONS and set the appropriate Response Allow header depending on the other methods defined in the route handler.

But this unfortunately doesn't work. I've got a few different types of solution working

• explicitly creating an OPTIONS endpoint in each route.ts
• making sure a GET endpoint is defined (issue here)

Is there a recommended approach? I'd like to get a recommended solution that I can stick with rather than having to exhaustively test all the endpoints with CORS regularly.

Another issue with relevant discussion: #48224

[ilikesymmetry]

Found a working solution for applying CORS via middleware instead of applying per-route. This solution includes preflight check so that POST and other request methods work okay. If your API routes use more headers than content-type and authorization, make sure to add those to corsHeaders!

import { NextRequest, NextResponse } from "next/server"

const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
  "Access-Control-Allow-Headers": "Content-Type, Authorization",
}

export function middleware(request: NextRequest) {
  if (request.method === "OPTIONS") {
    return NextResponse.json({}, { headers: corsHeaders })
  }
  const response = NextResponse.next()
  Object.entries(corsHeaders).forEach(([key, value]) => {
    response.headers.append(key, value)
  })

  return response
}

export const config = {
  matcher: "/api/:path*",
}

This file is named middleware.ts and placed in the src directory. We are using Nextjs v13 and Node v18.

[mcgingras]

This worked for me, thanks!

[fwextensions]

Super helpful!

Note that if you've already set up a headers() function in next.config.js, as described in the CORS guide, you don't need to also set the headers in this middleware. It can just look like this in that case:

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

export function middleware(request: NextRequest) {
  if (request.method === "OPTIONS") {
    return NextResponse.json({});
  }

  return NextResponse.next();
}

export const config = {
  matcher: "/api/:path*",
};

[PiedraFernando]

It didn't work for me in the POSTs, but it was because I forgot to add the key of my token in the Access-Control-Allow-Headers, I added it and it worked perfectly, Thank you very much

[allmors]

very nice

[tomelliot]

I believe this is resolved with #63264 and the workarounds won't be needed once it's merged.

[sko-kr]

The documentation (https://nextjs.org/docs/app/building-your-application/routing/middleware) states that middleware functions only work with edge runtime. So... I had to define OPTIONS function for each route, leading to considerable repetition of logic. To address this, I did something like below;

// api/some/route.ts
import {resJson} from 'inSomeFiles'

export { OPTIONS } from 'inSomeFiles'
export async function GET() {
  return resJson('Hellow Next.js')
}


// inSomeFiles.ts
import { NextResponse } from 'next/server';

export async function OPTIONS() {
  return NextResponse.json(null, { headers: corsHeaders });
}

export function resJson<T>(value: T, options?: Parameters<typeof NextResponse.json>[1]) {
  return NextResponse.json(value, { headers: corsHeaders, ...options });
}

export const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
  "Access-Control-Allow-Headers": "Content-Type, Authorization",
}