Node.js应用中Socket.IO的CORS跨域配置指南

const express = require('express');
const http = require('http'); // 引入http模块
const socketIo = require('socket.io');
const mongoose = require('mongoose');
const path = require('path');
const multer = require('multer');
const bodyParser = require('body-parser');

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

// Multer配置 (省略，与CORS无关，但保留上下文)
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "images");
  },
  filename: function (req, file, cb) {
    cb(null, require('uuid').v4());
  },
});
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源
const allowedOrigins = ['http://localhost:3000', 'http://localhost:4200']; // 根据你的前端应用地址修改

// 直接在Socket.IO实例中配置CORS
const io = socketIo(server, {
  cors: {
    origin: allowedOrigins, // 允许的前端源，可以是字符串数组或 '*'
    methods: ["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"], // 允许的HTTP方法
    credentials: true // 如果需要发送cookie或HTTP认证信息，设置为true
  },
});

// HTTP请求的CORS配置 (可选，如果Socket.IO和HTTP API共享同一个服务器，推荐使用cors npm包)
app.use((req, res, next) => {
  const origin = req.headers.origin;
  if (allowedOrigins.includes(origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
  }
  res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET, POST, PUT, PATCH, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  next();
});

// 路由 (省略，与CORS无关)
// 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") // 替换为你的数据库连接字符串
  .then(() => {
    server.listen(8080, () => {
      console.log('Server running on port 8080');
    });

    io.on('connection', (socket) => {
      console.log('Client connected:', socket.id);
      socket.on('disconnect', () => {
        console.log('Client disconnected:', socket.id);
      });
    });
  })
  .catch((err) => console.log(err));

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const mongoose = require('mongoose');
const path = require('path');
const multer = require('multer');
const bodyParser = require('body-parser');
const cors = require('cors'); // 引入cors包

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

// ... (Multer配置等与之前相同) ...

// 定义允许的CORS源
const allowedOrigins = ['http://localhost:3000', 'http://localhost:4200'];

// 使用cors npm包配置HTTP API的CORS
app.use(cors({
  origin: allowedOrigins,
  methods: ["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"],
  credentials: true
}));

// 直接在Socket.IO实例中配置CORS (此部分仍需保留，因为cors npm包主要作用于Express路由)
const io = socketIo(server, {
  cors: {
    origin: allowedOrigins,
    methods: ["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"],
    credentials: true
  },
});

// ... (路由、错误处理、数据库连接和服务器启动等与之前相同) ...