CORS error with Nextjs on POST requests while GET requests and Postman requests work fine

I am trying to access a RESTful API written in Nextjs. The API works well with Postman or curl. However, I get the following error on (only) POST requests:

Access to XMLHttpRequest at 'http://localhost:3000/api/articles' from origin 'http://localhost:5173' 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.

GET requests work as expected.

I have set all necessary CORS headers in the Response as:

res.headers.append("content-type", "application/json")
res.headers.append("Access-Control-Allow-Origin", req.headers.get('origin'))
res.headers.append("Access-Control-Allow-Methods", "GET, POST, PATCH, DELETE")
res.headers.append("Access-Control-Allow-Headers", "Content-Type")

I checked multiple times, and all urls are correct (including req.headers.get('origin') in the above snippet). Maybe I am missing something important here?

First I tried hitting the API via Postman and everything worked as intended. I then implemented GET requests and still no issue. But I cannot make POST requests work.

Setup

API is written in Nextjs 13.4.4, client application is written in react 18.
I am using axios to make requests from client.

Ok so found a solution.

Web browsers send a CORS preflight to the server to see if the CORS protocol is understood.
Preflight only fetches whatever OPTIONS method returns. In my case, I had only defined POST and GET route handlers and just needed an OPTIONS handler that would send necessary CORS headers to the preflight. Here's an example:

export function OPTIONS(req: NextRequest): NextResponse<any> {
  const res = new NextResponse();

  if (isWhitelistOrigin(req)) {
    res.headers.append(
      "Access-Control-Allow-Origin",
      req.headers.get("origin")!
    );
  }
  res.headers.append("Content-Type", "application/json");
  res.headers.append("Allow", "GET,POST,OPTIONS");
  res.headers.append("Access-Control-Allow-Methods", "GET,OPTIONS,POST");
  res.headers.append(
    "Access-Control-Allow-Headers",
    "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Authorization, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers"
  );

  return res;
}

isWhitelistOrigin is a helper function that returns true if I want to allow the request origin to access the API and false otherwise.