[Feature request]: Add ability to set server.origin to fix CORS with Vite

[pveierland]

Is your feature request related to a problem? Please describe.

Using certain features, such as Workers/SharedWorkers requires that the loaded resource has the same origin.

With tuono dev I'm now getting the following error when loading a SharedWorker:

Uncaught (in promise) SecurityError: Failed to construct 'SharedWorker': Script at 'http://localhost:3000/vite-server/@fs/project/src/lib/worker.ts?worker_file&type=classic' cannot be accessed from origin 'https://project.localhost'.

The file is confirmed available from the URL https://project.localhost/vite-server/@fs/project/src/lib/worker.ts?worker_file&type=classic'.

Describe the solution you'd like

It appears that being able to control the Vite setting server.origin would allow fixing this CORS issue.

At the same time, it would be good if the functionality of server.host and server.port could be controlled as well.

Describe alternatives you've considered

No response

Additional context

No response

[Valerioageno]

Could you please add some reproduction instructions?

[pveierland]

To reproduce, add the following to tuono-app example:

tuono-app/src/routes/worker.ts

onmessage = function(e) {
  console.log('Worker: Message received from main script');
  const result = e.data[0] * e.data[1];
  if (isNaN(result)) {
    postMessage('Please write two numbers');
  } else {
    const workerResult = 'Result: ' + result;
    console.log('Worker: Posting message back to main script');
    postMessage(workerResult);
  }
}

tuono-app/src/routes/index.tsx

import type { JSX } from 'react'
import type { TuonoProps } from 'tuono'

interface IndexProps {
	subtitle: string
}

export default function IndexPage({
	data,
	isLoading,
}: TuonoProps<IndexProps>): JSX.Element {
    const setupWorker = () => {
        const myWorker = new Worker(new URL("./worker.ts", import.meta.url));
    };

	return (
        <button onClick={setupWorker}>Setup Worker</button>
	)
}

• Running tuono dev and accessing the application at http://localhost:3000 and clicking the button works fine and does not result in errors in the developer console, as the worker can be loaded.
• Running tuono dev and accessing the application via a HTTPS proxy such as nginx or caddy from a URL such as https://project.localhost and clicking the button results in the following error in the developer console, as the worker cannot be loaded due to mismatching CORS origin:

Uncaught SecurityError: Failed to construct 'Worker': Script at 'http://localhost:3000/vite-server/@fs/tuono-app/src/routes/worker.ts?worker_file&type=classic' cannot be accessed from origin 'https://project.localhost'. at setupWorker (index.tsx:13:26) setupWorker	@ index.tsx:13

See info about same-origin policy: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

[pveierland]

Note that it is easiest to test with Chrome, as Firefox does not seem to provide this error message in the developer console.

[mustafasegf]

on tuono we hardcoded localhost:3000 for the vite hmr https://github.com/tuono-labs/tuono/blob/main/packages/tuono/src/ssr/index.tsx#L20

maybe we can change it to window.location.hostname ?

[mustafasegf]

nvm, i just realize it's part of the code that run on the worker. can't get the hostname that way

[Valerioageno]

@pveierland You put a worker within the src/routes folder which is strictly limited to routes. Would it work as well if you put it in the public/ folder? I never worked with SharedWorker but if I'm not wrong you should expose them as JS

[Valerioageno]

const myWorker = new Worker(new URL("./worker.ts", import.meta.url));

To access this file it needs to be within the public/ folder

[pveierland]

The issue is not that the script is not available. It is available and can be downloaded from the URL:

http://localhost:3000/vite-server/@fs/tuono-app/src/routes/worker.ts?worker_file&type=classic

The issue is that when using a HTTPS proxy with the site hosted at https://project.localhost, the file cannot be used by the browser, as it is not allowed to load certain resource types from different origins. SharedWorker scripts must be loaded from the same origin. This is why I believe controlling the server.origin will resolve the issue, as it will allow the script to be loaded from the same origin as the website, which is the URL http://project.localhost/vite-server/@fs/project/src/lib/worker.ts?worker_file&type=classic.

I've only used the routes/ folder for the worker.ts in the example. In my own project I have worker.ts in src/lib with the same issue. Placing the script in the public folder and loading it from new URL("/worker.ts", import.meta.url) results in the same issue:

The URL http://localhost:3000/vite-server/@fs/project/public/storePathWorker.ts?worker_file&type=module is valid and contains the script, however it cannot be accessed from the origin https://project.localhost as the same-origin policy requires resources to be loaded from the same origin.

[Valerioageno]

Thanks for the explanation! I hope to be available for this soon!