Fastify集成fastify-socket.io时配置CORS仍出现跨域错误如何解决

1. fastify-cors注册语法错误 #

当前代码注册fastify-cors时提前闭合了register方法的括号，配置对象完全没有传入插件，fastify层面的CORS规则没有生效：

// 错误写法
server.register(fastifyCors),
  {
    origin: "*",
    methods: "GET,POST,PUT,PATCH,DELETE",
  };

修正写法，将配置对象作为第二个参数传入register方法：

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

2. socket.io未单独配置CORS #

fastify-cors的规则仅作用于fastify普通HTTP路由，socket.io的握手请求是独立处理的，不会继承fastify-cors的配置，需要在注册fastify-socket.io时单独传入CORS规则：

// 错误写法
server.register(fastifyIO);

修正写法：

server.register(fastifyIO, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"]
  }
});

完整修正后的后端代码 #

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

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

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

server.register(fastifyIO, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"]
  }
});

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);
    });
  });
});

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

可选前端优化 #

如果仍有跨域问题，可在前端连接时添加传输协议优先级配置，优先走websocket避免轮询阶段的跨域检测：

const socket = io("http://localhost:5000", {
  transports: ['websocket', 'polling']
});

内容的提问来源于stack exchange，提问作者Eric Pezzulo