Page does not load correctly when opening index.html locally

[firecat53]

Tried both in qutebrowser and chrome on Fedora 34 and got the same result when opening index.html locally on my computer:

The app is not functional at all. The most recent commit that still functions normally is d8dda2d67 (right before your big refactor, I think :smile: ).

Let me know what other information I can provide!

[ondras]

Please try opening your browser's DevTools / Console; perhaps something will be logged there.

[ondras]

...I am afraid you are running into https://github.com/github/fetch/pull/92#issuecomment-140665932. Running stuff via file:/// is generally not recommended.

[firecat53]

Output from the qutebrowser devtools console:

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
index.html:1 Access to font at 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0' from origin 'file://' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
fontawesome-webfont.woff2:1 Failed to load resource: net::ERR_FAILED
my-mind.js:3931 Fetch API cannot load file:///home/firecat53/docs/family/scott/src/projects/my-mind/map.css. URL scheme "file" is not supported.
init14 @ my-mind.js:3931
index.html:1 Access to font at 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0' from origin 'file://' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
fontawesome-webfont.woff:1 Failed to load resource: net::ERR_FAILED
my-mind.js:3931 Uncaught (in promise) TypeError: Failed to fetch
    at init14 (my-mind.js:3931)
    at init19 (my-mind.js:4563)
    at my-mind.js:4584
    at my-mind.js:4585
index.html:1 Access to font at 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0' from origin 'file://' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
fontawesome-webfont.ttf:1 Failed to load resource: net::ERR_FAILED
editor.html:1 Not allowed to load local resource: file:///home/firecat53/docs/family/scott/src/projects/my-mind/editor.html

What changed with the refactor that doesn't allow just opening index.html? That's still the recommended way to run the app per the README.

Thanks!

[ondras]

What changed with the refactor that doesn't allow just opening index.html?

Opening index.html itself is okay. But the app fails to fetch a crucial bit of CSS that is later used to inject styles into the map (exported SVG needs the inline CSS to maintain consistent visuals). And fetching stuff while using file:// is apparently problematic.

That's still the recommended way to run the app per the README.

I will have to update the README then. Using file:// is already limiting you in several other ways (basically nothing network-related works).

On the other hand, we might be able to fetch the problematic CSS file via XHR - this API might not be CORS-limited.

[firecat53]

Let me know what I can do to help test! I really appreciated the offline capability that the app had previously. It's a much lighter and simpler version of Freemind. Ultimately I would have no problem spinning up an nginx container to run it locally via a web server but I definitely prefer the simplicity of just opening index.html. Perhaps online/offline modes depending on use case?

Thanks for your work on this project!!

[ondras]

The XHR workaround only seems to work in Firefox. I do not care about Chrome that much, but the limited support probably means that the said functionality might get removed soon. I will try to think about a different solution or approach to this issue.