How to fetch cart.js from inside an web pixel? Error "Requests are not allowed to the same origin"

Technical Q&A

Topic summary

A developer is trying to fetch /cart.js from within a Shopify app web pixel but encounters a “Requests are not allowed to the same origin” error due to the web pixel running in a sandbox environment.

Proposed Solutions:

  • Two users suggest setting up an app proxy through the Shopify Partner Dashboard, which would route requests from the store to an external server URL, potentially bypassing same-origin restrictions.
  • Configuration involves specifying a subpath prefix (e.g., apps) and subpath (e.g., my-app-proxy), then mapping to a backend proxy URL.

Conflicting Perspective:

  • Another user argues that app proxies cannot solve this issue because they still route through the same origin by design, which is precisely what triggers the error.
  • This user questions why web pixels have this limitation, noting it’s not documented.

Alternative Approach:

  • For read-only cart data access, the web pixel’s init object provides cart information without requiring a fetch request.

Status: The discussion remains unresolved with conflicting advice about whether app proxies are viable.

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

Hi everyone, ich have a shopify remix app with an app web pixel, inside the pixel i want to “fetch(”/cart.js")" but i always got the error saying “Requests are not allowed to the same origin”. I did some search and it turns out that its because web pixel runs inside sandbox. Does anyone know how to fetch cart.js from inside an app web pixel?

Can app proxy help?

2

Yes, using an app proxy can help resolve this issue! An app proxy allows you to route requests from your Shopify store to an external URL, which can be useful for fetching data from your app’s server.

Here’s a general approach to set up an app proxy:

Go to your Shopify Partner Dashboard.

Select your app and navigate to the Configuration section.

Set up the app proxy by specifying the subpath prefix and subpath.

Enter the URL of your proxy server in the Proxy URL field.

Save and release the changes.

For example, if your subpath prefix is apps and your subpath is my-app-proxy, then any path in your online store after https://example.myshopify.com/apps/my-app-proxy will be proxied to the provided proxy URL.

This setup should allow you to fetch cart.js from within your app web pixel without encountering the same-origin policy error.

3

Hi @Webstollen ,
Using an App proxy is a practical solution for overcoming the sam-origin policy restrictions.

1. Set Up the App Proxy

  1. Log in to your Shopify Partner Dashboard and select your app

  2. Under the App Setup section, look for App Proxy

  3. Specify Proxy Settings by setting Subpath Prefix something like apps and Subpath to my-app-proxy or any custom identifier

  4. Enter the URL of your app’s server endpoint that will handle the request, like, https://your-app-server.com/proxy

  5. Save the changes and release the update

Example Proxy Setup:

Storefront Proxy URL: https://your-store.myshopify.com/apps/my-app-proxy
Backend Proxy URL: https://your-app-server.com/proxy

4

No, an app proxy can seemingly not help. I’m running into a similar issue (not from the cart endpoint tho), in which the error clearly states “RestrictedUrlError: Requests are not allowed to the same origin”. Using an app proxy will, by definition, send the request via the same origin (that’s the whole point of an app proxy). The real question here is why can’t a web pixel make requests to the same origin? It’s not explained anywhere in the docs, and it seems like an odd limitation. If anyone comes across this issue and happens to find a reason/solution, please share.

In your specific case, web pixels have access to the cart in the init object. Maybe that can help you if you’re just reading cart data, not writing it. See docs here: https://shopify.dev/docs/api/web-pixels-api/standard-api/init