Socket.io 和 NGROK 出现 CORS 错误，为什么会发生以及如何解决？

Question

我正在实现 Socket.io，但无论我尝试什么配置，都会遇到 NGROK 的 CORS 错误。

这是我的 Socket.io 服务器代码：

import dotenv from 'dotenv';

dotenv.config();

import { createServer } from 'http';
import { Server } from 'socket.io';

const httpServer = createServer();
const PORT = process.env.PORT || 5000;
const io = new Server(httpServer, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"],
  },
  path: "/correction-socket"
});

function disconnectAllRooms(socket) {
  socket.rooms.forEach(room => {
    if (room !== socket.id) {
      socket.leave(room);
    }
  })
}

function isRoomAlreadyOccupied(payload) {
  const rooms = [];
  io.sockets.sockets.forEach((socket) => {
    socket.rooms.forEach(room => rooms.push(room))
  });
  return rooms.some(room => room === payload);
}

io.on('connection', (socket) => {
  socket.on('joinRoom', (room) => {
    disconnectAllRooms(socket);
    const currentRoomAlreadyOccupied = isRoomAlreadyOccupied(room);

    if (!currentRoomAlreadyOccupied) {
      socket.join(room);
      socket.emit('roomAccessed', true);
    } else {
      socket.emit('roomAccessed', false);
    }
  });

  socket.on('leftRoom', (room) => {
    io.emit('releasedRoom', room);
  });

  socket.on('disconnecting', () => {
    socket.rooms.forEach(room => {
      if (room !== socket.id) {
        io.emit('releasedRoom', room);
      }
    });
  });
});

httpServer.listen(PORT, () => console.log(`Server running on PORT ${PORT}`))

这是我的客户端连接代码：

this.socket = io(process.env.SOCKET_CORRECTION_URL, {
        path: '/correction-socket'
      });

鉴于我在开发环境中面临同样的问题，我相信问题可能不在于 NGROK。

我希望找到 CORS 问题的解决方案。

Answer 1

ngrok 在访问您的网站时使用“存根”。当你连接一个socket时，你专门连接到这个“存根”，自然就没有关于cors的信息了。

连接套接字时，需要在客户端添加额外的

ngrok-skip-browser-warning

标头，然后连接将直接通过套接字连接到服务器。

向连接添加标头：https://socket.io/docs/v3/client-initialization/#extraheaders

禁用存根：https://ngrok.com/abuse