CORS Issue in Shopify Remix App

Shopify Apps

Topic summary

A developer is encountering CORS errors when calling an API endpoint from a Shopify Customer Account UI extension, despite setting the Access-Control-Allow-Origin: * header.

Technical Setup:

  • The extension makes a GET request to a Cloudflare tunnel endpoint
  • The Remix app’s API route (api.customer.jsx) returns customer data with CORS headers included
  • The loader function uses Shopify’s authenticated customer context

Current Problem:
CORS errors persist even with the wildcard origin header configured in the response.

Status:
The issue remains unresolved with no responses yet. The developer is seeking guidance on proper CORS handling specifically for Shopify Customer Account UI extensions.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone,

I’m facing a CORS issue while calling an API endpoint from my Shopify Customer Account UI extension.

Here’s the API call I’m making from the extension:

const fetchCustomerId = async () => {
try {
const response = await fetch(‘https://peak-keith-manor-reduce.trycloudflare.com/api/customer’, { method: ‘GET’ });

if (!response.ok) {
console.error(‘Error fetching customer ID:’, response.statusText);
return null;
}

const data = await response.json();
return data.customerId;
} catch (error) {
console.error(‘Fetch Error:’, error);
return null;
}
};

// Get Customer ID
const customerId = await fetchCustomerId();

And here’s my API route (api.customer.jsx) in the Remix app:

import { json } from “@remix-run/node”;

export async function loader({ context }) {
const customer = await context.shopify.authenticated.customer();

return json(
{ customerId: customer?.id || null },
{
headers: {
“Access-Control-Allow-Origin”: “*”,
},
}
);
}

Even though I have added “Access-Control-Allow-Origin”: “*”, I’m still encountering CORS errors.

Has anyone faced a similar issue with Customer Account UI extensions? How can I properly handle CORS in this case?