App proxy doesn't work in the Customer Account UI extension

Shopify Apps
1

App proxy doesn’t work in the Customer Account UI extension, and I want to fetch customer details using the shop access token and create or update metafields, so how to solve this issue.

async function callToApi(customerObj) {
const customOptions = {
method: ‘POST’,
headers: {
‘accept’: ‘application/json’,
‘Content-Type’: ‘application/json’,
‘Access-Control-Allow-Origin’: “*”,
},
body: JSON.stringify({ customerObj }),
};
try {

const response = await fetch(‘/apps/api’, customOptions);
if (!response.ok) {
throw new Error(‘Failed to call API’);
}
const data = await response.json();

} catch (error) {
console.error(‘Error during fetch:’, error);
}
}

jhondeveloper_0-1741236833039.png

2

Hi @jhondeveloper , this is a common challenge when working with UI extensions in the Customer Account area. The issue is that app proxies aren’t supported in the Customer Account UI extension context, which is why your fetch to /apps/api isn’t working as expected.

Here are a few options to work around this:

  1. Server-Side Endpoint:
    Instead of relying on an app proxy, set up your own backend endpoint that your UI extension can call. Make sure you securely handle the shop access token on the server side. Your extension can then fetch customer details and update metafields by calling your own API endpoint.

  2. Direct API Calls with Proper Authentication:
    If possible, consider calling Shopify’s Admin API directly from your backend (not from the extension) using the shop access token you have. Then, expose the required data to your UI extension in a secure way.

  3. CORS & URL Considerations:
    If you decide to stick with a proxy-like approach, double-check your CORS settings on your server and use an absolute URL. Also, note that adding the header Access-Control-Allow-Origin in the request won’t help—it should be set on the server response.

Ultimately, the key is to move the API call logic to your server rather than relying on an app proxy within the UI extension. That way, you can securely use the shop access token to fetch customer data and update metafields.

Best,
Tracy from Kudosi Reviews

3

Why do you need to call your app to get customer data? Can’t you just fetch the Shopify API?

await fetch("shopify://customer-account/api/2025-01/graphql.json", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(`
    query {
      customer {
        id
        metafields(identifiers: [${metafieldDefinitions.map(
          ({ namespace, key }) => `{namespace: "${namespace}", key: "${key}"}`
        )}]) {
          id
          namespace
          key
          value
        }
      }
    }
  `),
});