Express CORS 不适用于 socket.io

Question

我已经为我的快递服务器使用了 cors，但我不知道为什么它不起作用。谁能帮我解决这个问题？

访问 XMLHttpRequest 在 'https://tic-tac-toe-server.now.sh/socket.io/?EIO=3&transport=polling&t=N6Z2b4X' 来自原点“http://localhost:8080”已被 CORS 策略阻止： 请求中不存在“Access-Control-Allow-Origin”标头 资源。

客户：

import io from 'socket.io-client';
const socket = io('https://tic-tac-toe-server.now.sh')

这是我的 index.js

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


const router = require('./router');
const { addUser, removeUser, getUsers } = require('./users');
const { getMatch, addPlayer, destroyMatch } = require('./players');

const PORT = process.env.PORT || 5000;

const app = express();
const server = http.createServer(app);


const io = socketio(server);

app.use(router);
app.use(cors());


io.on('connection', function (socket) {
    const id = socket.id;
    let user_room = '';

    /**
     * User Joins to the global room
     */
    socket.on('join', function ({ name, room, playing = false }) {
        addUser({ id, name, room, playing }); // add user to users array
        user_room = room;
        socket.join(user_room);
        socket.join(id);
        socket.emit('user_joined', getUsers());
        socket.broadcast.emit('user_joined', getUsers()); // emit event with modified users array
    });

    /**
     * Match Started
     */

    socket.on('player_joined', user => {
        const match = getMatch();
        addPlayer(user.match, user);
        if(match.hasOwnProperty(user.match) && match[user.match].length === 2){
            socket.emit('player_joined', match[user.match]);
            socket.broadcast.to(user.match).emit('player_joined', match[user.match]);
        }
    });

    socket.on('move', (data) => {
        socket.emit('move', data);
        socket.broadcast.to(data.match).emit('move', data);
    });

    socket.on('emote', (data) => {
        socket.emit('emote_from', data);
        socket.broadcast.to(data.match).emit('emote_to', data);
    });


    /**
     * On user challenge
     */


    socket.on('challenge', (socketId) => {
        io.to(socketId).emit('accept', id);
    });

    socket.on('rejected', (socketId) => {
        io.to(socketId).emit('rejected', id);
    });

    socket.on('accepted', data => {
        io.to(data.opponent.id).emit('accepted', data);
        socket.emit('accepted', data);
    });

    socket.on('player_left_match', match => {
        socket.broadcast.to(match).emit('player_left_match');
    });

    socket.on('destroy_match', match => {
        destroyMatch(match);
    });

    /**
     * User Disconnect function
     */
    socket.on('disconnect', () => {
        socket.leave(user_room);
        socket.leave(id);
        removeUser(id); // remove user form users array
        socket.emit('user_left', getUsers());
        socket.broadcast.emit('user_left', getUsers());  // emit event with modified users
    })


});

server.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Answer 1

你可以告诉 socket.io 只使用不受 CORS 约束的 webSocket 传输：

const socket = io('https://tic-tac-toe-server.now.sh')

到这里：

const socket = io('https://tic-tac-toe-server.now.sh', {transports: ['websocket']});

一些背景。在其默认配置中，socket.io 使用多个普通 http 请求启动每个连接。如果连接是跨域的，这些普通的 http 请求需要服务器端 CORS 支持。但是，socket.io 可以配置为直接使用 webSocket 传输（无论如何最终都会使用），并且 webSocket 连接不受 CORS 限制。

从 http 轮询开始的 socket.io 设计主要是因为在 webSocket 支持的早期，并不是每个浏览器都支持它，也不是每个服务器基础设施都支持它。但是现在，它得到了广泛的支持。

因此，告诉 socket.io 从一开始就使用 webSocket 传输可以避免许多潜在的 CORS 问题。

---

我们现在正在处理一个不同的问题，控制台中显示的错误 https://tic-tac-toe-vue.now.sh/ 来自 webSocket.js 中的这段代码。

  try {
    this.ws =
      this.usingBrowserWebSocket && !this.isReactNative
        ? protocols
          ? new WebSocketImpl(uri, protocols)
          : new WebSocketImpl(uri)
        : new WebSocketImpl(uri, protocols, opts);
  } catch (err) {
    return this.emit('error', err);
  }

由于引用了isReactNative，因此看起来与 React 相关，但由于您的代码已打包并最小化，因此从这里进行任何调试都不是很容易。