CORS problem with my deno web server

I wrote this tiny websocket server in deno:

Deno.serve((req) => {
  const webSocketUpgradeRequested = req.headers.get("upgrade") === "websocket";

  if (!webSocketUpgradeRequested) {
    return new Response("Web socket not requested.");
  }

  const { socket, response } = Deno.upgradeWebSocket(req);

  socket.addEventListener("open", () => {
    console.log("Socket open");
  });

  socket.addEventListener("message", (e) => {
    console.log(e.data);
  });

  const header = new Headers();
  header.append("Access-Control-Allow-Origin", "*");

  const res = new Response(response.body, {
    headers: header,
  });

  return res;
});

Deno.serve((req) => {
  const webSocketUpgradeRequested = req.headers.get("upgrade") === "websocket";

  if (!webSocketUpgradeRequested) {
    return new Response("Web socket not requested.");
  }

  const { socket, response } = Deno.upgradeWebSocket(req);

  socket.addEventListener("open", () => {
    console.log("Socket open");
  });

  socket.addEventListener("message", (e) => {
    console.log(e.data);
  });

  const header = new Headers();
  header.append("Access-Control-Allow-Origin", "*");

  const res = new Response(response.body, {
    headers: header,
  });

  return res;
});

I set the access-control header to allow for cross-origin access. Specifically my frontend. But when I invoke the server from my frontend like this:

    onMount(() => {
        const header = new Headers();
        header.append("upgrade", "websocket");

        fetch("http://localhost:8000", {
            headers: header,
        });
    });

    onMount(() => {
        const header = new Headers();
        header.append("upgrade", "websocket");

        fetch("http://localhost:8000", {
            headers: header,
        });
    });

The request fails because the cross-origin request was blocked as the 'Access control allow origin header is missing' even though it is not.

4 Replies

lcasdev•2mo ago

you also have to do header.append("Access-Control-Allow-Headers", "*");

TheOneThatPlaysTooMuchOP•2mo ago

This is what the code looks like with the change :

lcasdev•2mo ago

mh actually reading through this again, this shouldn't work at all on the server, are you not seeing an error like: Upgrade response was not returned from callback and on the client you should be using new WebSocket(), not fetch()

TheOneThatPlaysTooMuchOP•2mo ago

I changed the code to use

new WebSocket();

new WebSocket();

and now it works. Thanks.

CORS problem with my deno web server

Did you find this page helpful?