CORS error when fetching storefront-banner

Topic summary

CORS (Cross-Origin Resource Sharing) errors occur when loading Shopify’s consent cookie banner in a Hydrogen storefront, both on localhost and a test environment. A screenshot shows the fetch to the storefront banner being blocked by CORS.

A suggestion to add custom CORS headers isn’t applicable because the banner script is served automatically via Shopify’s and isn’t editable.

Working fix: update environment configuration so PUBLIC_CHECKOUT_DOMAIN matches PUBLIC_STORE_DOMAIN (instead of using a checkout-specific path). This resolved the banner issue for multiple users, despite documentation implying copying the checkout domain.

Follow-up: one case shows the banner on localhost but not in production. The likely cause is an environment variable mismatch across environments. The original reporter hasn’t deployed to production yet due to unrelated UI changes, and cannot confirm a production fix.

Status: development fix confirmed; production issue remains open pending verification of environment variables and deployment.

Summarized with AI on December 16. AI used: gpt-5.

Yes, problem with environment variables is most likely. Anyway, I’ve already checked that they are correct in the admin. Maybe I have a problem in my environment…
Let me know when you deploy.
Thanks for the reply and if you need anything just ask.