解决 Socket.IO 跨域问题：CORS 配置深度解析

const express = require('express');
const http = require('http'); // 引入 http 模块
const socketio = require('socket.io');
const bodyParser = require('body-parser');
const multer = require('multer');
const path = require('path');
const { v4: uuidv4 } = require('uuid');
const mongoose = require('mongoose');

const app = express();
const httpServer = http.createServer(app); // 使用 http 模块创建服务器

// Multer 配置 (示例代码中已提供)
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "images");
  },
  filename: function (req, file, cb) {
    cb(null, uuidv4());
  },
});

const fileFilter = (req, file, cb) => {
  if (
    file.mimetype === "image/png" ||
    file.mimetype === "image/jpg" ||
    file.mimetype === "image/jpeg" ||
    file.mimetype === "image/jfif"
  ) {
    cb(null, true);
  } else {
    cb(null, false);
  }
};

app.use(bodyParser.json());
app.use(multer({ storage: storage, fileFilter: fileFilter }).single("image"));
app.use("/images", express.static(path.join(__dirname, "images")));

// 注意：这里可以移除原有的手动设置 CORS 头部的中间件，因为 Socket.IO 会独立处理，
// 并且如果使用 cors 模块，也可以由 cors 模块统一管理。
// app.use((req, res, next) => {
//   res.setHeader("Access-Control-Allow-Origin", "*");
//   res.setHeader(
//     "Access-Control-Allow-Methods",
//     "OPTIONS,GET,POST,PUT,PATCH,DELETE"
//   );
//   res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
//   next();
// });

// 路由示例 (假设已定义)
// app.use("/feed", feedRoutes);
// app.use("/auth", authRoutes);

app.use((error, req, res, next) => {
  console.log(error);
  const status = error.statusCode || 500;
  const message = error.message;
  const data = error.data;
  res.status(status).json({ message: message, data: data });
});

mongoose
  .connect(
    "mydatabase_connection_string" // 替换为您的数据库连接字符串
  )
  .then(() => {
    // Socket.IO CORS 配置的关键部分
    const io = socketio(httpServer, {
      cors: {
        origin: 'http://localhost:3000', // 允许来自此源的连接
        methods: ["GET", "POST"],       // 允许的 HTTP 方法
        credentials: true               // 如果需要发送 cookies 或授权头，请设置为 true
      },
    });

    io.on('connection', (socket) => {
       console.log('Client connected:', socket.id);
       // 在这里处理 Socket.IO 事件
       socket.on('disconnect', () => {
         console.log('Client disconnected:', socket.id);
       });
    });

    httpServer.listen(8080, () => {
      console.log('Server and Socket.IO listening on port 8080');
    });
  })
  .catch((err) => console.log(err));

npm install cors

const express = require('express');
const http = require('http');
const socketio = require('socket.io');
const cors = require('cors'); // 引入 cors 模块
// ... 其他 require ...

const app = express();
const httpServer = http.createServer(app);

// ... Multer 和 bodyParser 配置 ...

// 使用 cors 中间件
app.use(cors({
  origin: 'http://localhost:3000', // 允许来自此源的请求
  methods: ["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"], // 允许的 HTTP 方法
  credentials: true // 如果需要发送 cookies 或授权头
}));

// 注意：原有的手动设置 CORS 头部的中间件应该被移除，以避免冲突和冗余
// app.use((req, res, next) => { ... });

// ... 路由和错误处理 ...

mongoose
  .connect(
    "mydatabase_connection_string"
  )
  .then(() => {
    const io = socketio(httpServer); // 此时 Socket.IO 实例不再需要单独的 cors 配置，
                                    // 因为 http 服务器已经通过 cors 中间件处理了
    io.on('connection', (socket) => {
       console.log('Client connected:', socket.id);
       socket.on('disconnect', () => {
         console.log('Client disconnected:', socket.id);
       });
    });

    httpServer.listen(8080, () => {
      console.log('Server and Socket.IO listening on port 8080');
    });
  })
  .catch((err) => console.log(err));