Socket.io跨域访问限制问题求助：Origin is not allowed access

Hey David, let's break down what might be going wrong with your Socket.io setup and fix it step by step.

First, Let's Diagnose the Common Pitfalls #

From your code snippet, there are a few likely issues that could cause that "strange problem" you're seeing:

1. You're probably listening on the Express app instead of the http.Server instance

Socket.io is bound to the server variable you created with http.Server(app), but if your index.js calls app.listen(5000) instead of server.listen(5000), Socket.io won't be attached to the actual running server. That's one of the most common gotchas!

2. You're using a reserved Socket.io event name

Your code emits a connect event, but connect is an internal Socket.io event used by the library itself. Emitting it manually can interfere with the normal connection flow.

Here's the Fixed Setup #

Let's restructure your code to avoid these issues:

Step 1: Refactor your Socket.io module (e.g., socket.js)

const http = require('http');
const socketIO = require('socket.io');

// Export a function that takes your Express app and sets up Socket.io
module.exports = function setupSocket(app) {
  const server = http.Server(app);
  
  // Add CORS config if your client runs on a different port (like 3000)
  const io = socketIO(server, {
    cors: {
      origin: "http://localhost:3000", // Replace with your client URL
      methods: ["GET", "POST"]
    }
  });

  io.on('connection', function (socket) {
    console.log('User has connected');
    // Use a custom event name instead of "connect"
    socket.emit('welcome', { message: 'Hello World' });
  });

  // Return the server instance so we can listen on it in index.js
  return server;
};

Step 2: Update your index.js to use the server instance

const express = require('express');
const app = express();

// Add your Express middleware, routes, etc. here
app.get('/', (req, res) => {
  res.send('Hello from Express!');
});

// Import and set up Socket.io, then listen on the server
const setupSocket = require('./socket');
const server = setupSocket(app);

server.listen(5000, () => {
  console.log('Server running on port 5000 with Socket.io');
});

Step 3: Fix your client-side connection

Make sure your client is listening for the correct custom event:

// Client-side code (browser or frontend app)
const socket = io('http://localhost:5000');

// Listen for our custom "welcome" event
socket.on('welcome', (data) => {
  console.log(data.message); // Should log "Hello World"
});

// Listen for the internal "connect" event to confirm connection
socket.on('connect', () => {
  console.log('Successfully connected to Socket.io server');
});

Quick Checks to Verify #

• Open your browser's dev tools Network tab and look for requests to /socket.io/ – they should show up if the connection is working.
• Check your server console for the "User has connected" log when a client connects.
• If you're getting CORS errors, double-check the cors config in the Socket.io setup.

内容的提问来源于stack exchange，提问作者David Lasry