我尝试设置一个非常简单的应用程序,以熟悉在React应用程序中使用SOCKET.IO。服务器如下所示:
const io = require('socket.io')();
io.origins('*:*');
io.on('connection', (client) => {
client.on('subscribeToTimer', (interval) => {
console.log('client is subscribing to timer with interval ', interval);
setInterval(() => {
client.emit('timer', new Date());
}, interval);
});
});
const port = 8000;
io.listen(port);
console.log('listening on port ', port);
和使用Create-React-App设置的React客户端如下所示:
import React, { Component } from 'react';
import './App.css';
import openSocket from 'socket.io-client';
const socket = openSocket('http://localhost:8000');
function subscribeToTimer(cb) {
socket.on('timer', timestamp => cb(timestamp));
socket.emit('subscribeToTimer', 1000);
}
class App extends Component {
constructor(props) {
super(props);
subscribeToTimer((timestamp) => {
this.setState({
timestamp
});
});
}
state = {
timestamp: 'no timestamp yet'
};
render() {
return (
<div className="App">
<div className="App-header">
<h2>Our awesome drawing app</h2>
</div>
This is the value of the timer timestamp: {this.state.timestamp}
</div>
);
}
}
export default App;
因此,基本上服务器使用www.example.com向客户端发送一个时间戳socket.io,然后每秒在那里反映这个时间戳。然而,这个设置遇到了以下CORS问题:
localhost/:1无法加载http://localhost:8000/socket.io/?EIO=3&transport=polling&t=MEwUo-e:从“http://localhost:8000/socket.io/?EIO=3&transport=polling&t=MEwUo-e”到“https://localhost:8443/socket.io/?eio=3&transport=polling&t=MEwUo-e”的重定向已被CORS策略阻止:请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问源“http://localhost:3000”。
我检查了其他问题中提供的所有解决方案,即io.origins{*:*}
,我尝试使用express.js和cors npm包等,但错误仍然存在。知道我在这里做错了什么吗?我使用的是Chrome浏览器。提前感谢
3条答案
按热度按时间yzckvree1#
好吧,我终于找到了解决办法:https://github.com/socketio/socket.io-client/issues/641,这导致我将第4行中客户端的代码更改为
const socket = openSocket('http://localhost:8000', , {transports: ['websocket']});
6kkfgxo02#
使用此选项:
lnxxn5zx3#
我的解决办法就是
1.更新我NPM包:socket-io(在客户端和节点服务器上)。
我使用的是过时和不兼容的软件包。
1.不要忘记在服务器上指定允许的源
});