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

[Webstollen]

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?

[teresa32yon]

---

@Webstollen wrote:

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?

---

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.

[Mateen_Asghar]

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

[calvin_proteus]

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