Altair: Bug: CORs error for webworker for static site

[mwilliammyers]

First off: awesome tool! I am trying to switch from graphql playground to this—mainly for the add query button, it is super handy 👍—but I am getting a CORs error:

Any release after 2.4.3 gives me a CORs error from the webworker; I have completley disabled CORs in my webserver (which I don't want to do in production) but I don't think its an issue with my webserver?

Here is the error message I am getting:

main.js:1 Uncaught DOMException: Failed to construct 'Worker': Script at 'https://cdn.jsdelivr.net/npm/[email protected]/build/dist/0.worker.js' cannot be accessed from origin 'http://localhost:9001'.

Full stacktrace

main.js:1 Uncaught DOMException: Failed to construct 'Worker': Script at 'https://cdn.jsdelivr.net/npm/[email protected]/build/dist/0.worker.js' cannot be accessed from origin 'http://localhost:9001'.
    at Object.<anonymous> (https://cdn.jsdelivr.net/npm/[email protected]/build/dist/main.js:1:131485)
    at Object.9b6k (https://cdn.jsdelivr.net/npm/[email protected]/build/dist/main.js:1:138876)
    at i (https://cdn.jsdelivr.net/npm/[email protected]/build/dist/runtime.js:1:552)
    at Module.zUnb (https://cdn.jsdelivr.net/npm/[email protected]/build/dist/main.js:1:3009000)
    at i (https://cdn.jsdelivr.net/npm/[email protected]/build/dist/runtime.js:1:552)
    at Object.0 (https://cdn.jsdelivr.net/npm/[email protected]/build/dist/main.js:1:23691)
    at i (https://cdn.jsdelivr.net/npm/[email protected]/build/dist/runtime.js:1:552)
    at t (https://cdn.jsdelivr.net/npm/[email protected]/build/dist/runtime.js:1:421)
    at Array.r [as push] (https://cdn.jsdelivr.net/npm/[email protected]/build/dist/runtime.js:1:293)
    at https://cdn.jsdelivr.net/npm/[email protected]/build/dist/main.js:1:47
(anonymous) @ main.js:1
9b6k @ main.js:1
i @ runtime.js:1
zUnb @ main.js:1
i @ runtime.js:1
0 @ main.js:1
i @ runtime.js:1
t @ runtime.js:1
r @ runtime.js:1
(anonymous) @ main.js:1

polyfills.js:1 Uncaught ReferenceError: AltairGraphQL is not defined
    at HTMLDocument.<anonymous> (altair:37)
    at e.invokeTask (polyfills.js:1)
    at t.runTask (polyfills.js:1)
    at t.invokeTask [as invoke] (polyfills.js:1)
    at p (polyfills.js:1)
    at HTMLDocument.h (polyfills.js:1)
(anonymous) @ altair:37
e.invokeTask @ polyfills.js:1
t.runTask @ polyfills.js:1
t.invokeTask @ polyfills.js:1
p @ polyfills.js:1
h @ polyfills.js:1

To Reproduce
Steps to reproduce the behavior:

1. Attempt to load the website

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome Version 81.0.4044.138 (Official Build) (64-bit), Safari
• Platform: static site via jsdelivr hosted by my (local) webserver
• Version: >2.4.3

Additional context
This is probably related to: https://stackoverflow.com/questions/20410119/cross-domain-web-worker

[welcome[bot]]

👋🏾Thanks for opening your first issue here! Be sure to follow the issue template! ✌🏾

[open-collective-bot[bot]]

Hey @mwilliammyers :wave:,

Thank you for opening an issue. We will get back to you as soon as we can.
Also, check out our Open Collective and consider backing us - every little help counts!

[imolorhe]

Thanks for reporting this! I'd look into it as soon as I can. I didn't think of this issue when migrating to the web workers. This is the first time someone is reporting about it.

Unfortunately if what you say is true, then the only solution would be to download the static assets locally, and serve the files from there instead of using the jsdelivr CDN. What does your setup look like?

[mwilliammyers]

If there is a workaround for webworkers/CORs I would love to explore that first, but if not, that would work. My webserver can host static assets easily, but its Rust so they would have to be already minified and transpiled to JS etc...

[imolorhe]

The workarounds I have seen on the web so far (loading the worker script as a blob and using the createObjectURL to load it) don't look like recommended solutions. It seems to be a hacky solution that can't be guaranteed to work as expected all the time.

I'll also consider having the logic in the worker also loaded as part of the main script, such that, if the worker is unavailable (due to reasons like CORS), it can fall back to using the functionality from the main script. This would be bad for performance, but might be a possibly acceptable solution for cases like yours.

Usually loading from the jsdelivr CDN is easier to integrate (and you can easily update to the newer versions), but downloading the assets locally might be the recommended option for you.

[mwilliammyers]

Yeah that makes sense. Most of the solutions I have scene are very hacky... I would love that fallback (performance doesn't matter at all to me because this is a dev tool).

I managed to get it working with all local assets but I think I will just stick on 2.4.3 because like you said, it is much easier to integrate etc. and all the assets are 2x the size of the server binary 😆 ... gotta love JS...

[imolorhe]

Closed via 97d331f9fa0f58d79b10b987f540583b72a9f66f

[coderDem]

I still see this error in the new version:
DOMException: Failed to construct 'Worker': Script at 'http://unpkg.com/[email protected]/build/dist/0.worker.js' cannot be accessed from origin 'http://localhost:8080'.
Are this really fixed?

[imolorhe]

It should try to load the web worker. After that fails, it falls back to the alternate solution.

[mwilliammyers]

Falling back to the non web worker solution is working for me...

[coderDem]

Hello @imolorhe,

so you say me, that the version that are presented under http://unpkg.com/[email protected]/build/dist/0.worker.js should be working? If you say yes I totally need to understand what is wrong. Wich alternative version should it use? Also give it an alternative solutions for this problem? Thank you for your help.

[imolorhe]

@coderDem here's a jsfiddle working with unpkg.com: https://jsfiddle.net/imolorhe/zrjh2x08/27/

Note: The error message is still logged, but the fallback solution kicks in.

Probably you're missing the AltairGraphQL.init() method call, if it isn't loading for you.

Altair GraphQL Client - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

[coderDem]

Hello @imolorhe, You are right.