React-无法连接到服务器套接字

Question

我构建了一个服务器和客户端。 客户端正在尝试通过套接字连接到服务器但是我在控制台中收到以下错误：

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

服务器：

const express = require('express');
const socketio = require('socket.io');
const http = require('http');

const PORT =  process.env.PORT || 5000;


const router = require('./router');

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

io.on('connection',(socket) =>{
    console.log('[Server] We have new connection !!!');
    socket.on('disconnect',()=>{
        console.log('[Server] WeUser has left !!!')
    });
});

app.use(router); 

server.listen(PORT,()=>{
    console.log(`[Server] has started listen on port ${PORT}`);
});

客户：

let socket;
const Chat= ({location}) =>{
    const ENDPOINT ='localhost:5000';
    const [name,setName] = useState('');
    const [room,setRoom] = useState('');
    useEffect(()=>{
        const {name,room} = queryString.parse(location.search) // get url
        socket = io(ENDPOINT);
        //Update state with new name and room
        setName(name);
        setRoom(room);
        console.log(socket);
        // socket.emit('ERROR');
    },[ENDPOINT,location.search]);
    return (<h1>Chat</h1>);
}

起初，我确定问题在于服务器与客户端请求不在同一个端口上。但遗憾的是，事实并非如此。

编辑： 我已经将两个端口都更改为 3000 并且它似乎可以工作，但是，对于任何其他端口它都不是。有没有办法因为操作系统权限，客户端无法发送 ack 到连接

Answer 1

我遇到了同样的问题，你可以尝试在客户端添加传输，对我有用

const socket = io("localhost:5000", { transports: ["websocket"] });

Answer 2

您的 express 需要启用 CORS。这里是如何。安装这个包：

npm i cors

需要它：

const cors = require('cors');

然后在您的const app = express(); 正下方粘贴：

app.use(cors());