Node.js 反应-can';无法连接到服务器套接字

Node.js 反应-can';无法连接到服务器套接字,node.js,reactjs,express,socket.io,Node.js,Reactjs,Express,Socket.io,我构建了一个服务器和客户端。 客户端正在尝试通过套接字连接到服务器,但控制台中出现以下错误: 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-Orig

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

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>);
}
let套接字;
常量聊天=({location})=>{
const ENDPOINT='localhost:5000';
const[name,setName]=useState(“”);
常数[房间,设置室]=使用状态(“”);
useffect(()=>{
const{name,room}=queryString.parse(location.search)//获取url
套接字=io(端点);
//使用新名称和房间更新状态
集合名(名称);
休息室;
控制台日志(套接字);
//emit('ERROR');
},[ENDPOINT,location.search]);
返回(聊天);
}
起初,我确信问题在于服务器与客户端请求不在同一端口上。但遗憾的是,事实并非如此

编辑:
我已经将两个端口都更改为3000,它似乎可以工作,但是,对于任何其他端口都不行。是否有一种方式客户端无法向连接发送确认,因为操作系统权限

您的express需要启用CORS。这里是如何。安装此软件包:

npm i cors
要求它:

const cors = require('cors');
然后就在你的
const app=express()下面,粘贴此:

app.use(cors());

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

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

你确定这不是因为端口号不同吗,也许我错了,我把服务器端口改成了3000,客户端端点改成了localhost:3000。有一种方法可以解决与操作系统相关的问题?可能是操作系统阻止了对端口5000的请求,是的。检查您的防火墙设置。我已经尝试过了,但是得到了相同的异常:
polling xhr.js:202 GEThttp://localhost:5000/socket.io/?EIO=4&transport=polling&t=NS310zM net::ERR_失败
\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuhttp://localhost:5000/socket.io/?EIO=4&transport=polling&t=NS310zM"从源头上说,'http://localhost:3000'已被CORS策略阻止:请求的资源上不存在'Access Control Allow Origin'标头
@GuyArilei当您在浏览器的地址栏中调出此url时会发生什么<代码>http://localhost:5000/socket.io/?EIO=4&transport=polling&t=NS310zM您能解释一下问题是什么吗?不幸的是,我没有真正理解问题,我尝试了文档中的内容,但没有成功,因此我发现我描述的解决方案是最快的测试方法,因此我没有深入研究它