使用socket.io连接react前端和express后端

Question

我有一个用React制作的前端，在端口3000上运行，还有一个在端口5000上运行的express/node服务器，它们都在同一台计算机上（没有使用网络）。

我尝试让它们使用socket.io作为后端和socket.io-client作为前端进行通信。

连接以某种方式工作，但我在前端控制台中看到一些错误消息，即：

Access to XMLHttpRequest at 'http://localhost:5000/socket.io/?EIO=4&transport=polling&t=OMmsufE' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
polling.js:334          

GET http://localhost:5000/socket.io/?EIO=4&transport=polling&t=OMmsufE net::ERR_FAILED 200

这是前端代码，App.js :

import './App.css';

function App() {
  const socket = require('socket.io-client')('http://localhost:5000/socket.io/');

  socket.on('connect', () => {
    console.log('Connected to server');

    socket.on('message', (message) => {
      console.log('Received message:', message);
    });

    socket.emit('message', 'Hello, server!');
  });

socket.on('disconnect', () => {
  console.log('Disconnected from server');
});

  return (
    <div className="App">App 
    </div>
  );
}

和后端index.js :

const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);

const cors = require("cors")
app.use(cors({ origin: 'http://localhost:3000' }));
io.on('connection', (socket) => {
  console.log('User connected');

  socket.on('disconnect', () => {
    console.log('User disconnected');
  });

  socket.on('message', (message) => {
    console.log('Received message:', message);
    io.emit('message', message);
  });
});
app.use("/socket.io/", (req, res, next) => {
  next()
})

app.get("/", (req, res) => console.log("hello"))

app.use(cors())

server.listen(5000, () => {
  console.log('Server listening on port 5000');
});

有人有想法吗？

Answer 1

所以，确实，正如康拉德所说，问题来自前端，尤其是这一行：

const socket = require('socket.io-client')('http://localhost:5000/socket.io');

这是必要的，正如康拉德所说：

const socket = require('socket.io-client')('http://localhost:5000/);

但是，还有必要添加：

const socket = require('socket.io-client')('http://localhost:5000/', {transports: ['websocket'], upgrade: false});

现在可以了

Answer 2

我很确定您的

socket.io

端点正在阻止真正的端点

客户：

// remove `socket.io` here
const socket = require('socket.io-client')('http://localhost:5000/');

服务器：

const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);

const cors = require("cors")
app.use(cors({ origin: 'http://localhost:3000' }));
io.on('connection', (socket) => {
  console.log('User connected');

  socket.on('disconnect', () => {
    console.log('User disconnected');
  });

  socket.on('message', (message) => {
    console.log('Received message:', message);
    io.emit('message', message);
  });
});

app.get("/", (req, res) => console.log("hello"))

app.use(cors())

server.listen(5000, () => {
  console.log('Server listening on port 5000');
});

Answer 3

如果您的代码仍然无法正常工作，请尝试删除末尾的反斜杠

cors：{ 来源：“http://127.0.0.1:5173/”

//这样写

cors：{ 来源：“http://127.0.0.1:5173” }