node.js - React-无法连接到服务器套接字
问题描述
我建立了一个服务器和客户端。客户端正在尝试通过套接字连接到服务器但是我在控制台中收到以下错误:
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
解决方案
我有同样的问题,你可以尝试在客户端添加传输,为我工作
const socket = io("localhost:5000", { transports: ["websocket"] });
推荐阅读
- c# - SignalR 未收到消息 AspNet
- sql - 返回表中重复值的所有列名
- java - 按下 AlertDialog 的肯定按钮时是否刷新 RecyclerView
- javascript - 使用 javascript 突出显示 HTML 语法错误
- angular - 如果在父组件和子组件中设置 ChangeDetectionStrategy OnPush 将不起作用
- android - 将arraylist从一个片段解析到android中的另一个片段
- c - Linux 操作系统中的 main() 计数器
- php - 在 Laravel 中启动 php.exe 时出现错误 0x2
- html - 如何进入内部 Maybe monad 从纯脚本中的 html 按钮中提取类名?
- html - 自动调整 div 边距顶部动态