CORS issue fetching App Proxy data inside Checkout UI Extension

[Devkit_]

Hi Developers,

I'm currently working on a Shopify app where I need to fetch backend data inside a Checkout UI Extension.

I’ve already set up the App Proxy correctly, and when accessed in the browser, it returns the expected JSON response, confirmed and attached below.

Below is my app.proxy.tsx to get backend admin data in browser and it returns data perfectly as per attached below:

import { json, type LoaderArgs } from "@remix-run/node";
import prisma from "../db.server";

export async function loader({ request }: LoaderArgs) {
  const url = new URL(request.url);
  const shop = url.searchParams.get("shop");

  if (!shop) {
    return json({ error: "Missing shop parameter" }, { status: 400 });
  }

  const session = await prisma.session.findFirst({
    where: { shop },
    orderBy: { expires: "desc" },
  });

  if (!session?.accessToken) {
    return json({ error: "Access token not found for shop" }, { status: 403 });
  }

  const graphqlUrl = `https://${shop}/admin/api/2024-01/graphql.json`;

  const query = `
    query {
      bypass: metaobjects(type: "bypass_products", first: 1) {
        edges {
          node {
            fields {
              key
              value
            }
          }
        }
      }
      zipcode: metaobjects(type: "zipcode", first: 1) {
        edges {
          node {
            fields {
              key
              value
            }
          }
        }
      }
      customMessage: metaobjects(type: "custom_message", first: 1) {
        edges {
          node {
            fields {
              key
              value
            }
          }
        }
      }
    }
  `;

  const response = await fetch(graphqlUrl, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-Shopify-Access-Token": session.accessToken,
    },
    body: JSON.stringify({ query }),
  });

  const { data, errors } = await response.json();

  if (errors) {
    console.error("GraphQL errors:", errors);
    return json({ error: "Failed to fetch metaobjects" }, { status: 500 });
  }

  // Extract bypass product IDs
  let products: string[] = [];
  const bypassField = data?.bypass?.edges?.[0]?.node?.fields?.find(
    (f: any) => f.key === "products"
  );
  if (bypassField?.value) {
    try {
      products = JSON.parse(bypassField.value);
    } catch (e) {
      console.error("Invalid bypass products JSON:", e);
    }
  }

  // Extract zipcode status
  let status = false;
  const statusField = data?.zipcode?.edges?.[0]?.node?.fields?.find(
    (f: any) => f.key === "status"
  );
  if (statusField?.value) {
    status = statusField.value.toLowerCase() === "true";
  }

  // Extract custom message
  let message = "Testing";
  const messageField = data?.customMessage?.edges?.[0]?.node?.fields?.find(
    (f: any) => f.key === "message"
  );
  if (messageField?.value) {
    message = messageField.value;
  }

  return json({ bypassProductIds: products, status, message });
}

Below is the JSON data in external browser as per attached below:

However, when I try to fetch this App Proxy JSON from inside my Checkout UI Extension, I get a CORS error.

I understand that App Proxies are server-side and not CORS-enabled, but I was wondering if there’s a Shopify-approved pattern for securely accessing this backend data from within the checkout extension context.

Your help will be much appreciated.

Many thanks,