node.js - 客户端和服务器端 (Reacr/Node.js) 之间的 Socket.io 连接失败

Question

我正在尝试获得基本的套接字连接。

服务器看起来像这样:

    const express = require("express");
    const app = express();
    const port = 4000;
    const server = require("http").createServer(app);
    let io = require("socket.io")(server);

    app.get("/", (req, res) => res.send("Server up"));

    io.on("connection", socket => {
      console.log("a user connected");
    });

    app.get("/", (req, res) => res.send("Hello World!"));

    app.listen(port, () => console.log(`Example app listening on port ${port}!`));

React 组件如下所示:

    import React, { useState, useEffect } from "react";
    import io from "socket.io-client";

    const ChatScreen = () => {

      const socket = io('localhost:4000');


      useEffect(() => {
      }, []);

      return (
        <div className="chatScreen">HI</div>
      );
    };

    export default ChatScreen;

正如我从阅读中得到的那样，我应该在服务器中得到一个 console.log“一个用户连接”。
但是我收到了这两个错误:

Access to XMLHttpRequest at 'http://localhost:4000/socket.io/?EIO=3&transport=polling&t=N2xxl7i' 
from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-
Origin' header is present on the requested resource.

和

polling-xhr.js:267 GET http://localhost:4000/socket.io/?EIO=3&transport=polling&t=N2xy65_ 
net::ERR_FAILED

我该怎么做？

Answer 1

在你的 node js 应用中，你可以尝试在 var app = express(); 后面添加以下内容:

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");
  next();
});