[Bug]: Shopify cli theme dev command cause Cors 401 Error

[forwells]

Please confirm that you have:

• [X] Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• [X] Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Theme

Expected behavior

Everything in my browser console run correct.

Actual behavior

http://127.0.0.1:9292/checkouts/internal/preloads.js?locale=en-US load fonts assets 401 Cors error.

Verbose output

Access to link prefetch resource at 'https://fonts.shopifycdn.com/open_sans/opensans_n4.5460e0463a398b1075386f51084d8aa756bafb17.woff2?h1=MTZjZWU1LTIubXlzaG9waWZ5LmNvbQ&hmac=d86a57be38592a2443960090a9b8f0860db15f2158124bdc62211aea22ed5529' from origin 'http://127.0.0.1:9292' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

The `http://127.0.0.1:9292/checkouts/internal/preloads.js` stack print:
preloads.js?locale=en-US:38 
 GET https://fonts.shopifycdn.com/open_sans/opensans_n4.5460e04……NvbQ&hmac=d86a57b… net::ERR_FAILED 401 (Unauthorized)
prefetch	@	preloads.js?locale=en-US:38
next	@	preloads.js?locale=en-US:57
load（async）		
prefetch	@	preloads.js?locale=en-US:37
next	@	preloads.js?locale=en-US:57
load（async）		
prefetch	@	preloads.js?locale=en-US:37
next	@	preloads.js?locale=en-US:57
load（async）		
prefetch	@	preloads.js?locale=en-US:37
next	@	preloads.js?locale=en-US:57
load（async）

Reproduction steps

1. pull theme
2. shopify theme dev
3. view http://127.0.0.1:9292
4. view browser console

Operating System

Windowns 10, WSL 2

Shopify CLI version (check your project's package.json if you're not sure)

3.58.0

Shell

bash

Node version (run node -v if you're not sure)

v18.19.0

What language and version are you using in your application?

No response

[forwells]

anyone view this ~

[bansavage]

maybe related to this? https://github.com/Shopify/cli/issues/1642

[forwells]

Yes, ~ it is not a key issue, just in local development

[github-actions[bot]]

This issue seems inactive. If it's still relevant, please add a comment saying so. Otherwise, take no action. → If there's no activity within a week, then a bot will automatically close this. Thanks for helping to improve Shopify's dev tooling and experience.

P.S. You can learn more about why we stale issues here.

[MabeyC]

Hi,

I am also experiencing this issue.

Details:

• Issue: CORS error when loading font assets.

• Console Output:

  Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://vaudryjewelry.myshopify.com/cdn/fonts/gill_sans_nova/gillsansnova_n3.9bc1184b9390bb98ce0a2cb46e9266e8be923e76.woff2?h1=dmF1ZHJ5amV3ZWxyeS5jb20&h2=dmF1ZHJ5amV3ZWxyeS5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=843b0601e2fd0c64ea9b7e52062442298891cd716a4874e6c7bab654dfbcfe44. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 401.
  
  Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://vaudryjewelry.myshopify.com/cdn/fonts/gill_sans_nova/gillsansnova_n4.bb07ca19f1ff19b6ca9f72c55add75de6c568354.woff2?h1=dmF1ZHJ5amV3ZWxyeS5jb20&h2=dmF1ZHJ5amV3ZWxyeS5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=a67a8f5442955c4f1927dfcb37b95a6895761a870d580792c1dc6ee32cc028a6. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 401.
  
  HTTPS-Only Mode: Upgrading insecure request “https://vaudryjewelry.myshopify.com/cdn/fonts/gill_sans_nova/gillsansnova_n4.bb07ca19f1ff19b6ca9f72c55add75de6c568354.woff2?h1=dmF1ZHJ5amV3ZWxyeS5jb20&h2=dmF1ZHJ5amV3ZWxyeS5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=a67a8f5442955c4f1927dfcb37b95a6895761a870d580792c1dc6ee32cc028a6” failed. (M14-C1012)
  gillsansnova_n4.bb07ca19f1ff19b6ca9f72c55add75de6c568354.woff2
  The resource from “http://127.0.0.1:9292/checkouts/internal/preloads.js?locale=en-CA” was blocked due to MIME type (“application/json”) mismatch (X-Content-Type-Options: nosniff).
  127.0.0.1:9292
  Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://monorail-edge.shopifysvc.com/v1/produce. (Reason: CORS request did not succeed). Status code: (null).
  
  Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://monorail-edge.shopifysvc.com/unstable/produce_batch. (Reason: CORS request did not succeed). Status code: (null).
  3
  Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://sessions.bugsnag.com/. (Reason: CORS request did not succeed). Status code: (null).
  
  [bugsnag] Session failed to send… Error: Request failed with status 0
      onreadystatechange https://vaudryjewelry.myshopify.com/cdn/shopifycloud/payment-sheet/assets/latest/dynamic-checkout-cart.en.js:1
  dynamic-checkout-cart.en.js:1:29112
  Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://notify.bugsnag.com/. (Reason: CORS request did not succeed). Status code: (null).
  
  [bugsnag] Event failed to send… Error: Request failed with status 0
      onreadystatechange https://vaudryjewelry.myshopify.com/cdn/shopifycloud/payment-sheet/assets/latest/dynamic-checkout-cart.en.js:1
  dynamic-checkout-cart.en.js:1:28416
  

• Steps to Reproduce:

  1. Pull theme
  2. Run shopify theme dev
  3. View http://127.0.0.1:9292
  4. Check browser console

Environment:

• Operating System: Linux pop-os 6.8.0
• Shopify CLI Version: 3.61.2
• Shell: bash
• Node Version: v18.16.0
• Browser: Firefox 126.0.1 (64-bit)

Additional Information: When I ctrl + click on the terminal, I am redirected to the live domain '/?_fd=0&pb=0', but when brought up in the browser the css and fonts don't load.

Please let me know if any additional information is needed.

Thank you!

[github-actions[bot]]

This issue seems inactive. If it's still relevant, please add a comment saying so. Otherwise, take no action. → If there's no activity within a week, then a bot will automatically close this. Thanks for helping to improve Shopify's dev tooling and experience.

P.S. You can learn more about why we stale issues here.