CORS error blocks images only on desktop Linux

Technical Q&A

Topic summary

A Shopify store displays product images correctly on macOS, Windows, and Android, but fails to load them on Ubuntu across Firefox, Chrome, and Brave browsers—even with fresh installations and no extensions.

Root cause identified:

  • A CORS error blocks preloads.js from loading
  • This script normally replaces placeholder values like {width} in image URLs with actual dimensions
  • When the script fails, image tags retain invalid URLs containing {width} placeholders

Key technical detail:
Browser console shows: “Cross-Origin Request Blocked” for https://shop.app/checkouts/internal/preloads.js

Current status:
The issue remains unresolved. One respondent suggested checking the Network tab for failed image requests and noted that CORS typically doesn’t apply to images themselves—only to JavaScript. They also raised the possibility of CSS rules targeting specific devices, though this seems less likely given the cross-browser nature of the problem on Linux.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
1

A Shopify store has product images which display fine on macOS, Windows, and an Android tablet. However, product images do not display in Ubuntu using Firefox, Chrome, or Brave. I don’t believe any browser plugins could be causing the issue as it’s reproducible on a brand new account with no installed browser extensions.

The cause could be a CORS error. From the browser console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://shop.app/checkouts/internal/preloads.js?locale=en-US&shop_id=XXXXXXXX. (Reason: CORS request did not succeed). Status code: (null).

I believe this results in not being turned into a valid path.

How could this only happen on desktop Linux? What can be done?

2

Hi,

In your browser, there should also be a Network tab in the developer console.

There you can filter requests to only images such as .png, .jpeg, etc.

After enabling that filter, refresh the page and you’ll be able to see the failed requests. They should be highlighted red.

Then you can inspect closer as to why they failed to load. I don’t believe CORS applies to images, it’s only a security feature around JavaScript, since JavaScript is actual code, not a flat image.

It might not be a Network problem at all. It could just be a CSS rule that applies to that type of device you’re testing with.

3

Thanks for the reply. I did a poor job explaining the details. I also now see that the HTML I included in my original post was removed.

It appears that a CORS error prevents a script called preloads.js from running. That script presumably modifies img tags so {width} is replaced with a valid value. If preloads.js does not run, then the img URLs contain {width} and do not map to a valid address.