为什么将 SocketIO 与 Express 和 React 一起使用时 CORS 会被阻止答案

【问题标题】：Why CORS is blocked when using SocketIO with Express and React为什么将 SocketIO 与 Express 和 React 一起使用时 CORS 会被阻止
【发布时间】：2021-08-01 01:55:25
【问题描述】：

我正在尝试使用 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;

我只是尝试测试连接事件，但出现以下错误：

CORS 策略已阻止从源“http://localhost:3000”访问“http://localhost:5000/socket.io/?EIO=4&transport=polling&t=NbN5Yrt”处的 XMLHttpRequest：无“访问权限” -Control-Allow-Origin' 标头存在于请求的资源上。

polling-xhr.js:203 GET http://localhost:5000/socket.io/?EIO=4&transport=polling&t=NbN5Yrt net::ERR_FAILED

我尝试添加：

{origins: '*'}

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

【问题讨论】：

您的 reactjs 应用程序是由您在顶部的同一台快速服务器提供服务，还是由不同的服务器提供服务？
不同服务器是什么意思？全部在我的本地运行
当你使用npm start 运行你的react 应用程序时，你默认在localhost:3000 启动一个开发服务器。我想我应该先发制人地告诉你，当你将来使用npm run build 构建应用程序的生产版本时，你需要以某种方式提供这些文件，因为那时你将无法使用开发服务器。跨度>

标签： node.js reactjs express socket.io cors

【解决方案1】：

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

// 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

【讨论】：