CORS problems embedding via runtime

Community Help
1

I have a notebook that I am trying to embed via the runtime, but I am running into CORS problems. The notebook in question is at @innermatrix/integration-test. The error I am getting is

Access to script at ‘https://api.observablehq.com/@innermatrix/integration-test’ from origin […] has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

And indeed it is missing:

$ curl -s -D- -o /dev/null https://api.observablehq.com/@innermatrix/integration-test"?v=1" | grep -i allow-origin

shows nothing whereas for the hello world notebook I see

$ curl -s -D- -o /dev/null https://api.observablehq.com/@observablehq/hello-world.js\?v\=3 | grep -i allow-origin
access-control-allow-origin: *

I tried both public and unlisted sharing for my notebook, and got the same error.

Ideas?

2

Turns out the example in npm is wrong and the correct way to include a script is

 import define from "https://api.observablehq.com/@innermatrix/integration-test.js";

rather than

import define from "https://api.observablehq.com/@innermatrix/integration-test";

(The js extension is the magic.)

1 Like
3

You should also append ?v=3 to the URL, otherwise you’ll be importing a legacy format.

If you don’t know the format by heart yet, you may want to work from the generated example code: Select Export > Embed cells from the notebook menu, then in the dropdown change “Iframe” to “Runtime with Javascript”. The code snippet will now contain all required URLs.

Turns out the example in npm is wrong

In which package did you see this example?

1 Like
4

Thanks!

You know, I can’t find it now so probably I just fumbled my copy/paste. Sorry!