405 Method Not Allowed

This is caused by export function in /api route being either one of two things:

1. there is a default export instead of individual export for HTTP methods like export async function POST()
2. you've named the exported function something other than the HTTP methods like GET, POST, PUT, DELETE, and Option

CORS Error to /api endpoint

This is caused by missing CORS config on /api/route.ts

import { NextResponse } from "next/server";

export async function OPTIONS(request: Request) {
  const allowedOrigin = request.headers.get("origin");
  const response = new NextResponse(null, {
    status: 200,
    headers: {
      "Access-Control-Allow-Origin": allowedOrigin || "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
      "Access-Control-Allow-Headers":
        "Content-Type, Authorization, X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Date, X-Api-Version",
      "Access-Control-Max-Age": "86400",
    },
  });

  return response;
}

404 Page Not Found

When you get a 404 response on an api route call when multiple HTTP methods coexist on a route file

• The root cause is that the new method added has an invalid code (e.g. filesystem path reference)
• When one bad method is introduced to the route file, other methods that were previously working will also break