I’m encountering an issue when using Shopify CLI to run my app in development.
I’m building a Shopify app with the Node + Express template, which includes a checkout extension that needs to make network requests. Since checkout extensions run in a web worker, Shopify’s documentation states that I must return Access-Control-Allow-Origin: * in the preflight response headers to allow CORS.
However, when I start my server using shopify app dev (which sets up a Cloudflare tunnel), the Access-Control-Allow-Origin: * header is stripped from the preflight response, causing CORS to fail.
In contrast, when I run my Express server manually and set up an ngrok tunnel myself (without using Shopify CLI), this issue does not occur.
-
Response when using Shopify CLI (Cloudflare tunnel):
-
Response when using a manually set up ngrok tunnel:
As shown above, the first response comes from Cloudflare, which appears to be the cause of the issue.
Some may suggest using the --tunnel-url flag to pass my manually created ngrok URL to the CLI, as mentioned in the documentation. However, I tried this, and the issue persists. It seems that Shopify CLI, regardless of whether it uses Cloudflare or ngrok, modifies the tunnel setup in a way that prevents the required CORS headers from being returned.
To clarify:
Manually setting up an ngrok tunnel works without issue.
Using Shopify CLI to tunnel (with both Cloudflare and ngrok) causes CORS to fail.
Has anyone encountered this before, or found a workaround?