How can I resolve App CORS policy blocking issues?

Shopify Apps
,

Topic summary

A developer is encountering a CORS (Cross-Origin Resource Sharing) policy error when trying to fetch resources from an ngrok URL to their Shopify store. The error indicates that the ‘Access-Control-Allow-Origin’ header is missing from the server response.

Technical Setup:

  • Server running on port 52203 with ngrok tunneling
  • Following Shopify’s token-gating example from GitHub
  • Preflight request failing access control checks

Proposed Solution:
Another user suggests explicitly adding the specific origin URL to the CORS configuration’s Allowed Origins list, rather than using a wildcard (‘*’). They note that Shopify appears to require the exact domain from which the request originates to be whitelisted in the CORS settings.

The issue remains unresolved, with the original poster awaiting confirmation on whether this approach will work.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

I was wondering if anyone can help me with this issue.

Access to fetch at [NGOROK WEBSITE URL]’ from origin ‘[SHOPIFY_STORE_WEBSITE_URL]’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: 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 server is listening on 50223 and I start ngorok to the server it listens to each time to get the ngorok url above. Any ideas why I am getting this error above?

My index.js file follows the tokengating example: https://github.com/Shopify/tokengating-example-app/blob/main/web/index.js

2

Try to put your URL App on Allowed Origins in your CORS configuration.

Is not enough only put ‘*’, to Shopify it seems to be necessary put the domain from the request is originated.

That worked for me.