I have an app that fetches a command with dynamic parameters:

https://belixa-web.vercel.app/orders/857258?token=ZGFIUmhmd1l4V3dSMk1Cc05jT2E5akprSlhWQ0puMmNlYWs3QldZcWp6ZEZQVGtTQjZhaFlLV2lzYTVnSmJQdnJhL0FZdGtJaVhNSG9yVUxyL2hXN3c9PQ

A basic little page:

export const dynamic = "force-dynamic";

const getOrder = async (orderId: string, token: string): Promise<Order> => {
  const URL = `https:/belixa.com/customer/v1/orders/${orderId}?token=${token}`;

  try {
    const response = await fetch(URL);
    return response.json();
  } catch (error) {
    console.error(error);
    throw new Error("Failed to fetch order: ");
  }
};

const Orders = async ({ params, searchParams }: OrdersProps) => {
  const orderId = params.orderId;
  const token = searchParams.token;

  let order = await getOrder(orderId, token);

  if (!order) {
    return (...);
  }

  return (<OrderCard order={order} />);
};

The backend is in C#, on a VM, on Azure.

When I work locally, everything works fine, but as soon as I deploy to Vercel or Netlify, it's a disaster.

It works half the time. When I get to the application for the first time, it doesn't work. When I refresh, it works. When I refresh, it doesn't work. When I refresh, it works and so on...

The app crashes because it receives an HTML error file from the backend instead of a JSON. Yet when I test the endpoint from my local machine, it always responds well.

I thought it might be a CORS or network problem, but it wouldn't work half the time... Do you have any idea, please?