My api is working well on my local server and postman, and when I deploy to vercel it works well too. But when I change the domain settings to redirect to my custom domain from the vercel default domain, I get CORS ERROR. This does not happen when I am not redirecting the domain.

This is the website
https://ewalletly-web.vercel.app

This is my api handler

import { NextRequest, NextResponse } from "next/server";
import { createClient } from "@/utils/supabase/server";

export async function POST(req: NextRequest) {
  try {
    const { location, bank, email } = await req.json();

    const supabase = createClient();

    // Check if the email already exists in the database
    const { data: existingEmail, error: emailError } = await supabase
      .from("waitlist")
      .select("*")
      .eq("email", email);

    if (emailError) {
      return NextResponse.json({ error: emailError.message }, { status: 500 });
    }

    if (existingEmail && existingEmail.length > 0) {
      return NextResponse.json(
        { message: "Email already exists in the waitlist" },
        { status: 400 }
      );
    }

    // Insert the data into the database
    const { error } = await supabase
      .from("waitlist")
      .insert([{ location, bank, email }]);

    if (error) {
      return NextResponse.json({ error: error.message }, { status: 500 });
    }
    return NextResponse.json(
      { message: "Data submitted successfully" },
      { status: 200 }
    );
  } catch (error) {
    console.error("Supabase Error:", error);
    return NextResponse.json({ error: "An error occurred" }, { status: 500 });
  }
}

And below is my vercel.json file to resolve the CORS Error but it is not working.

{
  "headers": [
    {
      "source": "/api/(.*)",
      "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"
        }
      ]
    }
  ]
}

Does anyone have an idea on how to sort this?

I will really look forward to any help. Thank you