为什么在Express和React中使用SocketIO时CORS被阻塞

Question

我试图用Node、React、Express和Socket.io开发一个简单的聊天应用程序。

下面是我的节点服务器设置：

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

// ENV VARS
if (process.env.NODE_ENV !== 'production') {
  require('dotenv').config();
}

const SERVER_PORT = process.env.SERVER_PORT || 5000;
const HOST = process.env.HOST || "http://localhost";

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

// MIDDLEWARE
app.use(cors());
app.use(express.urlencoded({extended: false}));
app.use(express.json());

io.on('connection', (socket) => {
  console.log('new client connected');
});

// ON LISTEN
server.listen(SERVER_PORT, () => {
  console.log(`app listening at ${HOST}:${SERVER_PORT}`);
});

import {io} from "socket.io-client";
  
import './App.css';

const PORT = 5000
const HOST = "http://localhost"
const SERVER_URL = HOST + ':' + PORT
console.log(SERVER_URL);

function App() {
  let socket = io(SERVER_URL);
  return (
    <div className="App">
      aaaa
    </div>
  );
}

export default App;

我试着补充：

{origins: '*'}

正如socket io doc所说，但错误仍在显示。我做错了什么？

Answer 1

我认为更改初始化顺序可能会有所帮助，因为服务器缺少应用于应用程序的所有中间件。

// INIT
const app = express();

// MIDDLEWARE
app.use(cors());
app.use(express.urlencoded({extended: false}));
app.use(express.json());

// Create server and listen on PORT after adding middleware
const server = app.listen(PORT, () => {
  console.log(`app listening at ${HOST}:${SERVER_PORT}`)
});

// Try to avoid wilcard ('*') origins
const io = socketio(server, { cors: { origin: '*' } });

// Handle socketio connections
io.on('connection', (socket) => {
  console.log('new client connected');
});

// EOF