NodeJS + Express Cors + SocketIO = XMLHttpRequest 错误

Posted 2023-03-04

【中文标题】NodeJS + Express Cors + SocketIO = XMLHttpRequest 错误

【英文标题】：NodeJS + Express Cors + SocketIO = XMLHttpRequest error

【发布时间】：2020-04-09 04:02:22

【问题描述】：

我用 nodejs 创建了一个简单的应用程序来测试 socketIO，我在我网站的一个子域上运行了服务器，而客户端（在 ReactJS 中）在另一个子域上。

我的服务器总是向我发送著名的错误：

访问 XMLHttpRequest 在 'https:///socket.io/?EIO=3&transport=polling&t=MyFav6q' 来自原点“https://”已被 CORS 策略阻止：否 请求中存在“Access-Control-Allow-Origin”标头 资源。

我尝试了超过 10 种解决方案，但它们都不起作用，我不知道这里有什么问题。

app.js

const cors = require("cors");
const app = require("express")();
app.use(cors());
const server = require('http').createServer(app);
const io = require('socket.io').listen(server);

io.sockets.on('connection', function (socket) 
    socket.emit('message', 'Vous êtes bien connecté !');

    socket.on('message', function (message) 
        console.log(socket.pseudo + ' me dit: ' + message);
        socket.broadcast.emit('message', socket.pseudo + " dit: "+message);
    );

    socket.on("pseudo", pseudo => 
        socket.pseudo = pseudo;
        socket.broadcast.emit('message', socket.pseudo + " s'est connecté !");
    );

    socket.on("reset-draw", data => 
        socket.broadcast.emit('reset-draw', socket.pseudo + " a reset le dessin !");
    );

    socket.on("draw-rect", data => 
        console.log(data);
        socket.broadcast.emit('draw-rect', data);
    );
);

server.listen(8100);

socketIO 部分的客户端：

import socketIOClient from "socket.io-client";

[...]

componentDidMount() 
        this._context = this.refs.canvas.getContext('2d');

        const socket = socketIOClient("https://<ServerURL>");
        socket.emit('pseudo', "testing_guy");
        socket.on("reset-draw", data => 
            this._context.clearRect(0, 0, 500, 500);
            console.log(data);
        );

        socket.on("draw-rect", data => 
            this.drawRect(data);
        );
    

【问题讨论】：

这能回答你的问题吗？ Why doesn't adding CORS headers to an OPTIONS route allow browsers to access my API?

您可以为您的用例配置cors() 中间件。

我已经尝试添加cors模块了

这可能是因为您没有为您的环境正确配置它。例如cors(credentials: true, origin: true)

【参考方案1】：

我需要使用我的主机服务器发送的IP和端口，之后我尝试了很多东西，但它只能在一天后工作。

【参考方案2】：

在服务器上将origins 属性设置为io。

io.origins('*')

默认情况下，任何情况都是允许的：

设置允许的来源值。默认为允许的任何来源。 如果未提供任何参数，则此方法返回当前值。

您也可以通过验证function

【讨论】：

该代码没有任何问题，您要么有其他东西阻止它，也许是代理，或者您没有显示相关部分。因为 socket.io 默认情况下允许来自任何域的流量。

测试了很多东西，是我的主机需要指定一个具体的ip和端口。但是在拥有可以工作的东西之后是一种纯粹的幸运（一天之后，它会无缘无故地工作）