How to configure cors?

[franciscohermida]

Trying to run the client in a vue vite app.

Also getting:
Uncaught (in promise) TypeError: WebSocket2 is not a constructor

[NathanFlurry]

hey @franciscohermida!

How to configure cors?

currently unsupported (going to sneak this in to 0.3.0 #622)

Uncaught (in promise) TypeError: WebSocket2 is not a constructor

i haven't seem this before, but i changed how this works in the upcoming 0.3.0 which might fix it. can you drop a quick overview of your build system so i can try to reproduce?

[franciscohermida]

Tried 0.4.0 (had to dig into npm RC releases), WebSocket error seems gone.

Still can't get it working in a Vite setup, with or without @cloudflare/vite-plugin.

• Without the plugin: Need to run wrangler dev and Vite separately on different ports, leading to CORS issues. Tried proxying but no luck.
• With the plugin: Browser shows "Not Found (ActorCore)", likely due to worker routes overriding the frontend.

[franciscohermida]

updated dependencies and got the same websocket2 error

[NathanFlurry]

@franciscohermida i'm going to double check v0.5 fixed this tomorrow

[franciscohermida]

cors still doesn't work in version 0.5

if you could provide your vite test project it would be great, since I can't figure out any way to get this working with it.

Ideally with the couldflare-vite-plugin

[NathanFlurry]

@franciscohermida did not see this message, apologies!

there were a few issues with CORS in the 0.5 release. just fixed them in 0.6.3. give it a go.

here's the my vite config for the client for reference: https://github.com/rivet-gg/rivet/blob/1660826fd40d5c2a4d3fe0478f152548c0442958/examples/asteroids/vite.config.ts

i have not tried using vite for the actors themselves, let me know if you're still running in to issues with this.

[valstu]

I think the problem lies in this file:
https://github.com/rivet-gg/actor-core/blob/main/packages/actor-core/src/common/websocket.ts

Don't know if this is related to Vite but the first import on line 6 works and code never reaches the catch block when in browser environment (or vite dev server at least). I changed the file to something like this and it seems to work:

export async function importWebSocket(): Promise<typeof WebSocket> {
	let _WebSocket: typeof WebSocket;
	
		if (typeof WebSocket !== "undefined") {
			// Browser environment
			_WebSocket = WebSocket;
		} else {
			try {
				// Node.js environment
				const ws = await import("ws");
				_WebSocket = ws.WebSocket as unknown as typeof WebSocket;
			} catch {
				// WS not available
				_WebSocket = class MockWebSocket {
					constructor() {
						throw new Error(
							'WebSocket support requires installing the "ws" package',
						);
					}
				} as unknown as typeof WebSocket; 
			}
		}
	

	return _WebSocket;
}

So basically first check if in browser environment and if so use native Websocket, if in node env then try to import ws.

I'm using React Router 7 in framework mode (Vite).

[valstu]

I can make PR if that makes sense. I Also bumped into this while trying to figure out how to configure cors :D

[valstu]

I added PR here #646

[NathanFlurry]

@valstu v0.5 ships with native CORS support (docs)

[valstu]

Cool, need to test this out, thanks!

[NathanFlurry]

@valstu looks like there were a few bugs in the v0.5 CORS release, give v0.6.3 a shot!