App Proxy Not Working in Customer Account UI Extension

Shopify Apps
1

Hi everyone,

I’m working with a Customer Account UI Extension, and I need to fetch data that I’ve stored in my custom app’s backend (using Prisma). The data (configured tags) is saved via the admin side of the app.

However, when I try to fetch this data from the customer account extension using the app proxy, it doesn’t seem to work. Here’s the code I’m using:

const fetchConfiguredTags = async () => {
try {
const tagRes = await fetch(/apps/wishlist?type=getConfiguredTags);
const tags = await tagRes.json();
console.log(tags);
return tags;
} catch (error) {
console.error(“Error fetching product tags:”, error);
return ;
}
};

2

Hi @greeshma ,

You’re facing this issue because Customer Account UI Extensions run in a secure, sandboxed environment that doesn’t include session cookies or access to Shopify admin authentication, which affects how app proxy requests behave. When using an app proxy inside the extension, make sure you’re calling the full app proxy URL (e.g., https://your-store.myshopify.com/apps/wishlist?type=getConfiguredTags) instead of a relative path like /apps/wishlist. Also, ensure your app proxy is correctly configured in the Partner Dashboard to allow unauthenticated storefront requests, and that your backend handles those requests without relying on admin sessions. Don’t forget to return proper CORS headers like Access-Control-Allow-Origin in your server response to avoid browser blocking. These adjustments should help your extension successfully fetch the configured tags from your backend.

Thanks!

1 Like
3

Hello @greeshma

Customer Account UI Extensions run in a sandboxed environment and can’t hit app proxy routes directly using a relative path like /apps/wishlist. App proxies are mainly meant for storefront use (like theme files), not extensions.

If you’re trying to pull data from your app’s backend (like your Prisma-stored tags), you’ll want to do it through a public API route on your app server, not the proxy. Here’s what you can do:

  1. Expose a custom endpoint on your app backend (e.g. https://your-app.com/api/tags).
  2. Make sure it handles CORS properly so your extension can call it.
  3. Inside the extension, fetch it using the full URL:

const fetchConfiguredTags = async () => {
try {
const tagRes = await fetch(“https://your-app.com/api/tags?type=getConfiguredTags”, {
method: “GET”,
headers: {
“Content-Type”: “application/json”,
},
});
const tags = await tagRes.json();
return tags;
} catch (error) {
console.error(“Error fetching product tags:”, error);
return ;
}
};

If your API requires auth, you’ll need to figure out how to securely pass a session or token. Otherwise, if the data isn’t sensitive, you can just return it publicly.

1 Like
4

@topnewyork @Kudosi-Carlos Thank you for the response. I’m encountering a CORS error, even though I returned the response as:

return cors(request, json({ productTags: productTags }));

To troubleshoot, I also tried this approach:

const productTags = await getConfiguredTags(shop);
return json(
{ productTags: productTags },
{ headers: { “Access-Control-Allow-Origin”: “*” } }
);

However, both methods still result in a CORS error when called from the Customer Account UI extension. Strangely, when I directly open the URL in the browser, I do get the correct response.

Can you please help me understand why the CORS error is happening when called from the extension, and how to resolve it?

5

@greeshma ,

The CORS error occurs because Customer Account UI Extensions run in a strict sandboxed environment, and even if you return Access-Control-Allow-Origin: *, Shopify may block the request unless all required CORS headers are correctly set, including Access-Control-Allow-Methods and Access-Control-Allow-Headers. Also, OPTIONS preflight requests must be handled properly on your backend. To fix it, ensure your server responds to both GET and OPTIONS requests with all necessary CORS headers: “Access-Control-Allow-Origin”, “Access-Control-Allow-Methods”, and “Access-Control-Allow-Headers”. Direct browser access works because it skips the extension’s stricter security context.

Thanks!

1 Like
6

@topnewyork
I added this code, but the CORS issue is still not resolved. Why is this happening?

case “getConfiguredTags”: {
const productTags = await getConfiguredTags(shop);

return json(
{ productTags },
{
headers: {
“Access-Control-Allow-Origin”: “*”,
“Access-Control-Allow-Methods”: “GET, POST, OPTIONS”,
“Access-Control-Allow-Headers”: “Content-Type, Authorization”,
},
}
);
}