Hi I was trying to hit the api route from another project running on localhost:3000. But I am constangly getting cors error.

The way I setup cors is like this:

middleware.ts

import { NextRequest, NextResponse } from "next/server";
import { handlePrivateRoute } from "./lib/auth";

export async function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname;

  // Appending cors headers for api routes
  if (pathname.startsWith("/api")) {
    const res = NextResponse.next();
    res.headers.append("Access-Control-Allow-Origin", "*");
    res.headers.append("Access-Control-Allow-Methods", "*");
    res.headers.append("Access-Control-Allow-Headers", "*");
    res.headers.append("Access-Control-Allow-Credentials", "true");
    return res;
  } else {
    // All routes are private, so always check authentication
    return handlePrivateRoute(request);
  }
}

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico, sitemap.xml, robots.txt (metadata files)
     */
    "/((?!_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)",
  ],
};

And here is my api route:

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

export async function POST() {
  return Response.json({ message: "ok" });
}

While hitting options it returns 200 but hitting post route will cause CORS error. Any solution to this ?