Hydrogen React Component Requests to Storefront API Blocked by Content Security Policy

Hydrogen and Storefront APIs
,
1

I have a simple Hydrogen storefront that I am attempting to add buy-now functionality to via the ByNowButton component provided by hydrogen-react.

Here is a streamlined view of the jsx side of my setup:

   <ShopifyProvider
      storeDomain={data.storeDomain}
      storefrontToken={data.storefrontPublicToken}
      storefrontApiVersion="2024-07"
      countryIsoCode="US"
      languageIsoCode="EN"
    >
        <CartProvider>
            <BuyNowButton variantId="gid://shopify/ProductVariant/{PRODUCT_VARIANT}">
            </BuyNowButton>
        </CartProvider>
</ShopifyProvider>

I have verified that the storedomain, the variantId, and the storefrontPublicToken are correct / match what I see in my dashboard, however clicking this button gives the following errors:

cart-hooks.tsx:40 Refused to connect to 'https://{STORE_DOMAIN}.myshopify.com/api/2024-07/graphql.json' because it violates the following Content Security Policy directive: "connect-src 'self' https://monorail-edge.shopifysvc.com http://localhost:* ws://localhost:* ws://127.0.0.1:* ws://*.tryhydrogen.dev:*".

and

Refused to connect to 'https://{STORE_DOMAIN}.myshopify.com/api/2024-07/graphql.json' because it violates the document's Content Security Policy.

(the domains in the error message are my actual domain, I just omitted it for privacy)

I get these errors both on a locally hosted server and on my site in production.

I found this documentation which seems like it could solve my issue: https://shopify.dev/docs/storefronts/headless/hydrogen/content-security-policy however I did not see anything in the Hydrogen setup documentation or in the Hydrogen-React docs that would imply I would need to manually allow requests to my store domain via CSP, so I feel I must be missing something.

What other things could potentially be causing an issue like this? Let me know if more information is needed as well.

Thank you! I will also post a response to this if I find an answer on my own.

2

Does the CSP warning go away if you set the storefrontApiVersion to 2024-10?

4

I set the api version to 2024-10 and ran h2-upgrade but am still getting the same error