NodeJS 无法解决React& SOCKET.IO CORS错误

pzfprimi  于 2022-12-12  发布在  Node.js
关注(0)|答案(3)|浏览(132)

我尝试设置一个非常简单的应用程序,以熟悉在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浏览器。提前感谢

yzckvree

yzckvree1#

好吧,我终于找到了解决办法:https://github.com/socketio/socket.io-client/issues/641,这导致我将第4行中客户端的代码更改为const socket = openSocket('http://localhost:8000', , {transports: ['websocket']});

6kkfgxo0

6kkfgxo02#

使用此选项:

const server = app.listen('3001', () => {
    console.log("Server Up")});

    const io = socket(server, {
        cors: {
            origin: "http://localhost:3000",
        }
    });
});
lnxxn5zx

lnxxn5zx3#

我的解决办法就是
1.更新我NPM包:socket-io(在客户端和节点服务器上)。

npm update

我使用的是过时和不兼容的软件包。
1.不要忘记在服务器上指定允许的源

const server = app.listen('8002', () => {
console.log("Server Up")});

const io = socket(server, {
    cors: {
        origin: "http://localhost:3000", //your own :port or a "*" for all origins
    }
});

});

相关问题