Getting cors error but I think I'm using the correct v3/v4 syntax--what's wrong?

[joshuasorkin]

Per the docs here, I need to explicitly enable cors.

Here's my server app.js code:

const express = require("express");
const http = require("http");
const socketIo = require("socket.io",{
    cors: {
      origins: ["http://127.0.0.1:3000"],
      methods: ["GET", "POST"],
      credentials:true
    }
  });
const cors = require('cors');

const port = process.env.PORT || 4001;
const index = require("./routes/index");

const app = express();
app.use(cors());
app.use(index);

const server = http.createServer(app);
const io = socketIo(server);

let interval;

io.on("connection", (socket) => {
  console.log("New client connected");
  if (interval) {
    clearInterval(interval);
  }
  interval = setInterval(() => getApiAndEmit(socket), 1000);
  socket.on("disconnect", () => {
    console.log("Client disconnected");
    clearInterval(interval);
  });
});

const getApiAndEmit = socket => {
  const response = new Date();
  // Emitting a new message. Will be consumed by the client
  socket.emit("FromAPI", response);
};

server.listen(port, () => console.log(`Listening on port ${port}`));

And here's my client app.js code:

import React, { useState, useEffect } from "react";
import socketIOClient from "socket.io-client";
const ENDPOINT = "http://127.0.0.1:4001";

function App() {
  const [response, setResponse] = useState("");

  useEffect(() => {
    const socket = socketIOClient(ENDPOINT,{withCredentials:true});
    socket.on("FromAPI", data => {
      setResponse(data);
    });
  }, []);

  return (
    <p>
      It's <time dateTime={response}>{response}</time>
    </p>
  );
}

export default App;

I'm getting the CORS error:
Access to XMLHttpRequest at 'http://127.0.0.1:4001/socket.io/?EIO=4&transport=polling&t=NgOMy1B' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Is there something different I should be doing to enable cors?

Windows v10.0.19042.1052
Node v14.16.1
"cors": "^2.8.5",
"express": "^4.17.1",
"socket.io": "^4.1.3"

[darrachequesne]

Hi! I think the option is origin, and not origins. Could you please check?

Reference: https://socket.io/docs/v4/handling-cors/

[joshuasorkin]

@darrachequesne I tried changing it to:

const socketIo = require("socket.io",{
    cors: {
      origin: "http://127.0.0.1:3000",
      methods: ["GET", "POST"],
      credentials:true
    }
  });

But I continue to get the same error:
Access to XMLHttpRequest at 'http://127.0.0.1:4001/socket.io/?EIO=4&transport=polling&t=NgTJCDL' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[darrachequesne]

Oh, I think I got it! The options should be provided to the constructor, and not to the require():

Before:

const socketIo = require("socket.io",{
    cors: {
      origin: "http://127.0.0.1:3000",
      methods: ["GET", "POST"],
      credentials:true
    }
  });

const io = socketIo(server);

After:

const socketIo = require("socket.io");

const io = socketIo(server, {
  cors: {
    origin: ["http://localhost:3000"], // instead of 127.0.0.1
    methods: ["GET", "POST"],
    credentials:true
  }
});

[joshuasorkin]

Thanks, this works! Want me to update the documentation and make a pull request?

EDIT: or is it that in the documentation the constructor is being called because the parameters are passed in as
const socketIo=require("socket.io")(httpServer,params)?

[darrachequesne]

EDIT: or is it that in the documentation the constructor is being called because the parameters are passed in as
const socketIo=require("socket.io")(httpServer,params)?

Yes indeed! I think the options object was just misplaced in your code.