CORS issue in `preview` when fetching data from `import.meta.glob`

[stephenlrandall]

Describe the bug

Not sure if this is a SvelteKit or Vite issue, but when you attempt to fetch data from a data:application/json;... path, a CORS error is thrown in preview mode only. This is odd because the Vite config docs (https://vite.dev/config/preview-options.html#preview-cors) suggest that 'Access-Control-Allow-Origin': '*' is set in preview mode.

Reproduction

https://github.com/stephenlrandall/kit-cors-issue

In dev mode, the page loads. When deployed (https://stephenlrandall.github.io/kit-cors-issue/), the page loads. But when you build and then run pnpm preview, an error appears.

Logs

Error: CORS error: No 'Access-Control-Allow-Origin' header is present on the requested resource
    at universal_fetch (file:///<path>/kit-cors-issue/.svelte-kit/output/server/index.js:1232:17)

System Info

System:
    OS: macOS 15.2
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 81.64 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.8.0 - /usr/local/bin/node
    npm: 10.1.0 - /usr/local/bin/npm
    pnpm: 9.15.4 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 132.0.6834.84
    Edge: 132.0.2957.115
    Safari: 18.2
  npmPackages:
    @sveltejs/adapter-static: ^3.0.0 => 3.0.8 
    @sveltejs/kit: ^2.0.0 => 2.16.1 
    @sveltejs/vite-plugin-svelte: ^4.0.0 => 4.0.4 
    svelte: ^5.0.0 => 5.19.1 
    vite: ^5.4.11 => 5.4.14

Severity

serious, but I can work around it

Additional Information

The workaround is to just not ever use the preview mode, which isn't the end of the world but it's also not really a workaround.

The reproduction looks contrived, but this issue arose for me when trying to create an inline bundle for a portable SPA. The usual fetch approach doesn't work over file:// and so I swapped to import.meta.glob. Dynamically importing files that way didn't seem to play nicely with HMR, but when you fetch the globbed URLs, HMR works wonderfully. But that leads to this issue.

[sapphi-red]

This is odd because the Vite config docs (https://vite.dev/config/preview-options.html#preview-cors) suggest that 'Access-Control-Allow-Origin': '*' is set in preview mode.

Vite recently changed the default of server.cors due to GHSA-vg6x-rcgg-rjx6 (preview.cors defaults to server.cors). The document was not updated, it'll be fixed by vitejs/vite#19271.

On the other hand, the same error seems to happen with Vite 5.4.11 (which does not contain the server.cors change). So probably it's not caused by Vite.

[kristaps777]

How would I debug something like this?
I recently bumped up vite version from 5.4.10 to 5.4.14 due to a security vulnerability, and now my local development environment is broken due to CORS. Downgrading back to 5.4.10 did fix the issue, but I don't want to do that.

[sapphi-red]

@kristaps777 The CORS error shown in the browser should tell you which URL needs to be allowed. You'll need to add the origin of that URL.

[kristaps777]

Was able to solve by adding cors: true under server block in vite.config.js.

[stephenlrandall]

@eltigerchino Why was this closed? Setting cors: true isn't a solution and is explicitly recommended against in the Vite docs. This seems to be a SvelteKit-specific issue, like sapphi-red explained, and isn't related to their recent CORS changes.