Fastify & Socket.io CORS 不被接受

Question

I'm tring to set up fastify-socket.io, fastify-cors, but I'm still getting CORS errors.

I have fastify-cors and fastsity-socket.io registered

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/socket.io/?EIO=4&transport=polling&t=NoUUJ6g. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Here is the back-end code:

import fastify from "fastify";
import fastifyIO from "fastify-socket.io";
import fastifyCors from "fastify-cors";

const server = fastify();''
const PORT = 5000;

server.register(fastifyIO);
server.register(fastifyCors),
  {
    origin: "*",
    methods: "GET,POST,PUT,PATCH,DELETE",
  };

server.listen(PORT, () => {
  console.log(`Server running on port:${PORT}`);
});

server.get("/", (request, reply) => {
  reply.status(200).send({ ServerOnline: true });
});

server.ready().then(() => {
  server.io.on("connection", (socket) => {
    console.log("user connected" + socket.id);
    socket.on("message", (data) => {
      console.log(data);
    });
  });
});

Here is the front end code:

import "./App.css";
import { io } from "socket.io-client";

function App() {
  const sendData = () => {
    const socket = io("http://localhost:5000");
    socket.on("connection");
    const sendMessage = () => {
      socket.emit("message", "hey it worked!");
    };
    sendMessage();
  };

  return (
    <div className="app-container">
      <h1>Socket.IO</h1>
      <button onClick={sendData}>Send</button>
    </div>
  );
}

export default App;

I'm not sure why I'm getting these cors Errors I think it has something to do with fastify-socket.io

Answer 1

Found the solution, it doesn't seem that registering fastifyCors before fastifyIO makes a difference, but I changed that anyway. I wasn't configuring fastifyIO correctly.

server.register(fastifyCors, {
  origin: "*",
  methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
});
server.register(fastifyIO, {
  cors: {
    origin: "http://localhost:3000",
    methods: ["GET", "POST", "PUT", "PATCH", "DELETE"],
  },
});

Answer 2

With Fastify cli scaffold

fastify.register(require('./plugins/cors.js'))
fastify.register(require('./plugins/socketio.js'), {
    // put your options here
})
fastify.register(AutoLoad, {
    dir: path.join(__dirname, 'plugins'),
    options: Object.assign({}, opts),
    ignorePattern: /.*(socketio|cors).js/
})