否 'Access-Control-Allow-Origin' - 节点 / 反应 / socket.io

Question

我曾尝试在我的项目中使用 socket.io 来进行实时通知，但我收到控制台错误，这是我的后端示例 (nodejs):

const express = require('express');
const app = express();
const Server = app.listen(1337);

const io = require('socket.io')(Server, {
    origins: ["http://localhost:3000"],
    handlePreflightRequest: (req, res) => {
        res.writeHead(200, {
          "Access-Control-Allow-Origin": "http://localhost:3000",
          "Access-Control-Allow-Methods": "GET,POST",
          "Access-Control-Allow-Headers": "my-custom-header",
          "Access-Control-Allow-Credentials": true
        });
        res.end();
    }
});

io.on('connection', (socket) => {
    console.log('connected');
    socket.on('message', (message) => {
        console.log('message');
    })
    socket.emit('message', 'toto');
});

前端（Reactjs）：

import './App.css';
import React, {useState, useEffect} from 'react';
import io from 'socket.io-client'

const socket = io('http://localhost:1337',{
  withCredentials: true
})

function App() {
  return (
    <div className="App">
    {/* <script src="http://localhost:1337/socket.io/socket.io.js"></script> */}
    </div>
  );
}

export default App;

这是我的导航器控制台上显示的错误：

Access to XMLHttpRequest at 'http://localhost:1337/socket.io/?EIO=4&transport=polling&t=NVYt_fH' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

polling-xhr.js:202 GET http://localhost:1337/socket.io/?EIO=4&transport=polling&t=NVYuaDS net::ERR_FAILED

我无法弄清楚我的错误，我尝试了太多解决方案但没有任何帮助/

Answer 1

谢谢@Beerswiller 的关注，我发现我想念的是：

而不是使用：

const io = require('socket.io')(Server, {
    origins: ["http://localhost:3000"],
    handlePreflightRequest: (req, res) => {
        res.writeHead(200, {
          "Access-Control-Allow-Origin": "http://localhost:3000",
          "Access-Control-Allow-Methods": "GET,POST",
          "Access-Control-Allow-Headers": "my-custom-header",
          "Access-Control-Allow-Credentials": true
        });
        res.end();
    }
});

我改为：

const io = require('socket.io')(Server, {
    cors: {
        origin : "http://localhost:3000"
    }
});

在前面部分我是这样的：

const socket = io('http://localhost:1337')

而不是：

const socket = io('http://localhost:1337',{
  withCredentials: true
})

否 'Access-Control-Allow-Origin' - 节点 / 反应 / socket.io

No 'Access-Control-Allow-Origin' - Node / react / socket.io

sockets

node.js

socket.io

reactjs