Why am I getting CORS errors with sendBeacon in my developer store app?

andrerigon
Shopify Partner
4 0 10

Hi,

 

We have an app on a developer store that uses a web pixel extension.

The extension send beacons to a few partners. 

Until a week ago, everything was fine.  But now we are getting CORS errors. For example:

 

Access to fetch at '<track-url>' from origin 'https://<my-test-store>.myshopify.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
the-multi-location-snowboard:1 Access to fetch at '<track-url>' from origin 'https://<my-test-store>.myshopify.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
s181a54bfw1c85c3aepe58c984em7036152bm.js:1 Uncaught (in promise) TypeError: Failed to fetch
at E.O.fetch (s181a54bfw1c85c3aepe58c984em7036152bm.js:1:32369)
at Object.d [as sendBeacon] (s181a54bfw1c85c3aepe58c984em7036152bm.js:1:23838)
at worker.modern.js:2:534
at Object.call (s181a54bfw1c85c3aepe58c984em7036152bm.js:1:22597)
at m (s181a54bfw1c85c3aepe58c984em7036152bm.js:1:37323)

Did something change on shopify's end? How should we use sendBeacon now?

 

Thank you.

Replies 9 (9)

edvinaskilbausk
Shopify Partner
8 0 3

Same goes for me as well. It worked a few days ago, and now my browser.sendBeacon() returns false and makes no request. Anyone help please?

f54ba3n
Shopify Partner
3 0 1

Same problem here. Did you find any solution?

SebastianJonas
Shopify Partner
2 0 2

It is the same for our app. We just noticed the CORS error on client-side but we can see the call on our servers. 

 

As there are not many things to misconfigure or use wrong, I assume there was a change on Shopify side.

 

Together with the fact that `checkout.order.id` is not there in ~1% of the events or it is sometimes `gid://shopify/OrderIdentity/<ID>`, it makes WebPixel useless in a professional context. Very sad 

ErSanjay
Shopify Partner
307 20 44

@andrerigon  For me with GTM Script is working fine. as of now.

 

Business Owner & Shopify Plus, Shopify app , Shopify Consultant - Full Stack Sofware Engineer
Warm regards,
Er Sanjay

If you find yourself in need of assistance with your store, don't hesitate to reach out! Feel free to send me a direct message, and I'll do my best to help you out.

adamgen
Shopify Partner
10 0 5

Some additional context to the same error;

 

In my case, when sending with browser.sendBeacon a request to the app proxy, I get a false response like @edvinaskilbausk mentioned. The false response is not registered to the user agent (source).

 

When requesting my server without a proxy, I get a Cors error.

 

This is frustrating and expensive as my service depends on this beacon request. I'm considering a get route that'll handle beacons the old-fashioned way.

Fractional VP R&D for E-commerce

adamgen
Shopify Partner
10 0 5

I get a false response when using sendBeacon to the app proxy, meaning it's not registered to the user agent like @edvinaskilbausk  said.

 

When posting to my direct URL, it sometimes responds with a cors; other times, it works.

 

Is this API considered stable? It's either not being used by many of us as intended, or there's an issue.

Fractional VP R&D for E-commerce
adamgen
Shopify Partner
10 0 5

I've found that it won't beacon to the app proxy because Shopify implemented a guard from addressing the same hostname as the store.

 

adamgen_0-1690916739505.png

 

However, beaconing from the main window, not the worker will work. So at the moment, I'll message the main window on each event and send a beacon from there.

 

Really hacking my way around this...

Fractional VP R&D for E-commerce
fzngagan
Shopify Partner
2 0 0

I'm happy to directly post to my app's URL but then the issue is, how to verify that the request legitimately came from a shopify site's page? I'm using the `shopify_app` ruby gem via the shopify Ruby on Rails template and I have `AppProxyVerification` module to verify requests from the AppProxy but not sure how to do so for direct requests to the app.

adamgen
Shopify Partner
10 0 5

I had the same dilemma; I've decided to avoid the proxy altogether. Whoever's spamming you might as well spam Shopify's proxy so it has no meaningful value in verifying it.

Fractional VP R&D for E-commerce