前端和后端在不同端口上运行时，Socket.io 客户端请求失败答案

【问题标题】：Socket.io client requests fail when frontend and backend run on different ports前端和后端在不同端口上运行时，Socket.io 客户端请求失败
【发布时间】：2021-01-23 12:54:45
【问题描述】：

我想将 Socket.io 与 React 前端和 NodeJS & Express 后端一起使用，但它们都在不同的端口上运行以进行开发（Fontend：3000；后端：8080）。

当 Socket.io-Client 加载后，我的前端执行 var socket = io('http://localhost:8080');，然后自动向 http://localhost:8080/socket.io/?EIO=4&transport=polling&t=NSlH7of 发出 GET 请求。该请求通常应该返回类似 0{"sid":"XXX","upgrades":["websocket"],"pingInterval":25000,"pingTimeout":5000} 的内容，但 Chrome 开发工具说状态是 (failed) net::ERR_FAILED。开发工具中也没有可用的响应。

但是，当我在我的 HTTP 客户端中运行 GET 请求时，它返回的正是我期望它返回的内容。

该错误看起来像是由 Socket.io-Client 引起的，但除了失败的 GET 请求之外，我没有收到任何错误。当我在一个端口上运行所有内容时（前端由后端的 webpack 提供服务），请求按预期通过。

如果有任何帮助，我将不胜感激！谢谢！

server.js

const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);

//Serve static react app
app.use(express.static('dist'));
app.use('/app', express.static('dist'));
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname + '../../../' + '/dist/index.html'));
});

io.on('connection', (socket) => {
    console.log('Connected')
    socket.on('join-game', (gameId, userId) => {
        console.log(gameId, userId);
    })
})

http.listen(process.env.PORT || 8080, () => {
    console.log(`Listening on port ${process.env.PORT || 8080}!`);
});

【问题讨论】：

标签： node.js express sockets socket.io

【解决方案1】：

我终于解决了这个错误！

问题是请求被 Chrome 的 CORS 阻止了。

我将const io = require('socket.io')(http) 改为const io = require('socket.io')(http, { cors: {}});。

现在一切正常。

【讨论】：

有同样的问题，这真的很有帮助。谢谢！

【解决方案2】：

如果你想为你的 socket.io 连接打端口 8080，你必须在你的 nodejs 程序（你的后端）中为那个端口设置一个服务器。在浏览器中运行的代码（React 术语中的前端代码）就像您的代码一样

var socket = io('http://localhost:8080')

只能发起连接请求。而且，如果没有服务器在监听这些请求，您会得到您的开发工具显示的失败状态。

顺便说一句，你最好让你的 nodejs 服务器程序只使用一个端口。只有一个端口，部署到生产服务器要简单得多。

【讨论】：