Why is this happening?

https://cdn.aayus.me/screenshots/2023/07/firefox_HaVNsrl3ZN.gif

The initial fetch has all the correct data i need but all the other fetches give a CORS missing allow origin error which is not true since I configed the server to allow all origins and it even works in a few of the fetches.
here is the getOrder function

const URL=`${process.env.NEXT_PUBLIC_API_URL}/orders`;

export const getOrder = (async(id: string) => {
  const res = await fetch(`${URL}/${id}`, { cache: 'no-store' });
  return res.json();
});

export default getOrder;

and here is the page.tsx that is using the getOrder function

"use client";

import getOrder from "@/actions/get-order";
import { useSearchParams } from "next/navigation";
import { Suspense } from "react";

export default async function SuccessPage() {
  const searchParams = useSearchParams();
  const id = searchParams.get("id");
  const data = await getOrder(`${id}`);

  console.log(data);
  return (
    <div className="flex items-center justify-center">
      {!data[0] ? (
        <h1>invalid order id</h1>
      ) : (
        <>
          <Suspense fallback={<h1>Loading...</h1>}>
            <h1>Order Placed Successfully. </h1>
            <h1>Order Id : {data[0].id}</h1>
            <h1>Phone : {data[0].phone}</h1>
            <h1>Address : {data[0].address}</h1>
          </Suspense>
        </>
      )}
    </div>
  );
}