无法通过局域网（同一网络上的不同机器）将套接字客户端（reactjs）连接到套接字服务器（express）

Question

我有两台不同的机器连接到同一个网络。

我想使用 LAN 分配的 IP 地址通过 LAN 网络进行连接，下面是简单的演示

Socket Client (Reactjs, IP : 192.168.0.103) 到 Socket Server (Express, IP :192.168.0.114)

问题： 出现错误：访问被 CORS 阻止（尝试了 express 'cors' 中间件但没有解决方案失败）

这是运行良好的简单 React 代码

import socketClient from 'socket.io-client';
const SocketServer = 'http://192.168.0.114:3000';

function App() {

  var socket = socketClient(SocketServer, {secure: true});

  socket.emit('client_connected', { payload: {
    message: "react client is connected"
  }});

  return (
    <div>
      
    </div>
  );
}

export default App;

还有简单的快速代码（也可以正常工作）

const cors = require('cors')
const express = require('express')
const bodyParser = require('body-parser')

const app  = express()
const http = require('http')
const server = http.createServer(app)
const { Server } = require('socket.io')
const io = new Server(server)


app.use(bodyParser.urlencoded({extended: true}))
app.use(express.static('public'))

app.use(cors({
    origin: '*'
}));

app.set('view engine', 'ejs')

app.get('/', (req,res) => {

    res.sendFile(__dirname + '/index.html')
})

io.on('connection', (socket) => {
    socket.on('client_connected', (message) => {
        console.log(message)
    })
})

server.listen(3000, () => {
  console.log('listening on *:3000');
});

在 ReatJs 上进入浏览器控制台时出现错误截图

enter image description here

我尝试在 express 中设置标题但得到同样的错误

任何帮助将不胜感激

Answer 1

你需要在socket server中配置cors not express

看这里了解更多配置https://socket.io/docs/v3/handling-cors/

配置示例

const io = require("socket.io")(httpServer, {
  cors: {
    origin: "https://example.com",
    methods: ["GET", "POST"]
  }
});