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

[andrerigon]

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.

[edvinaskilbausk]

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]

Same problem here. Did you find any solution?

[SebastianJonas]

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]

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

[adamgen]

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.

[adamgen]

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.

[adamgen]

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.

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...

[fzngagan]

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]

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.