CORS problems with static file loaded by static javascript

Support
,
1

Here’s a preview of one page of my site:
https://61ced341f926ab000764071f--quizzical-fermi-9c8ee3.netlify.app/alien/generate_alien.html

The site is generated by hugo, but I have some hand-crafted html/javascript/wasm in a static/directory, and that’s what’s being served here.

The page above loads some javascript, which loads some wasm, but I get a CORS error.

Access to fetch at ‘https://d33wubrfki0l68.cloudfront.net/js/44cbcd60c499472a782bd72195e2a9a5e2fc2621/alien/wasm_main.wasm’ from origin ‘https://61ced341f926ab000764071f--quizzical-fermi-9c8ee3.netlify.app’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

I’ve tried adding a netlify.toml file like this (at the top level of my repo), but although the build log suggests a header rule has been correctly parsed, from the error above it seems like the header is not being set on the wasm_main.wasm file above.

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[[headers]]
  for = "/*"
    [headers.values]
    Access-Control-Allow-Origin = "*"
2

Hi @paulhankin

The error returned is a 404 as the file does not exist on the CDN.

3

Ah, I think I understand. You’re right this has nothing to do with CORS and the error I’m seeing is because the resource isn’t found.

netlify re-writes relative URLs so that “wasm_main.js” from generate_alien.html becomes https://<something>.cloudfront.net/js/<some-hash>/alien/wasm_main.js

But it doesn’t rewrite URLs inside the javascript (at least in this case), so when wasm_main.js tries to fetch the wasm using a relative URL then it incorrectly tries to fetch it from https://<something>.cloudfront.net/js/<some-hash>/alien/wasm_main.wasm rather than from where it’s actually served from.

Is it documented somewhere how netlify does url rewriting, and when it does/doesn’t happen? And for this specific case, how do I get the actual URL of the static file into my javascript?

4

You have Netlify’s asset optimization enabled on your site, which is why the JS is served from cloudfront.net. But the asset optimization does touch the .wasm file as it only optimizes some files (JS, CSS, some images.) So likely the wasm_main.wasm file isn’t on Cloudfront, but with the main site e.g. yoursite.netlify.app/js/alien/wasm_main.wasm.

If you turn off asset optimization (for JS at least), does the site work as intended?

5

Hi, yes thanks… disabling js optimization allows the site to work! Thanks very much for your help, especially since this is both a holiday and the weekend,

As some feedback for netlify, there’s something unsatisfactory with the optimization choices given on the site settings page since there’s no mention of serving from cloudflare or what might break if optimization is turned on.

1 Like
6

Good to hear things are working for you now :netliconfetti:

While I am not a Netlify employee (simply a community helper) I will ensure your feedback is seen by the Netlify team.

1 Like