[SOLVED] How to avoid CORS issues when creating an Offline Website?

How to avoid CORS issues when creating an Offline Website?

For the purposes of authoring HTML content that is intended to be viewed offline, for example:

when distributed on a USB thumb drive as documentation accompanying a physical product
as promotional content distributed at a physical event, or
as an instruction manual downloaded once from a company server and then archived for later reference

How can HTML-based simple site be authored so that it avoids running into CORS issues?

This question is for situations where a web server is not used, and any dynamically served content (if any at all) would be handled by JavaScript.

I realize there is already a lot of info on the web regarding CORS, but it seems to vary a lot depending on the use case and specific configuration, naturally. For this reason I have decided to ask specifically about how to manage it within the context of a website made for offline viewing. The first big difference from other resources I have seen, for example, is the question of what to set for document.domain when there is no domain. That's just the beginning of the issues.

Hopefully there is a solution that is not too complex, since the site itself would be rather simple in its architecture.

For example, when the volume is mounted, there may be simply an HTML file and a folder:

📄index.html
📁resources

Thanks.

Solution

CORS issues can be avoided while creating an offline website. The content must be hosted locally by downloading dependencies locally and using relative paths. Cross-Origin request must be avoided. While testing with XHR and Fetch, "file://" must be avoided. A service worker can be used for advanced online behavior. APIs must be used with a CORS proxy. Headers must be set correctly on the local servers.