node.js - 使用最新版本的 socket.io 时我的 cors 出现问题

问题描述

我想知道是否有人可以帮助我使我的代码适应最新版本的 socket.io。我已经尝试实现新功能，但我仍然无法在终端中控制台记录任何内容，任何人都可以看到问题吗？这是我在刷新前端后尝试在后端控制台日志名称和房间时遇到的错误：

从源“http://localhost:3001”访问“http://localhost:3000/socket.io/?EIO=4&transport=polling&t=NOaiiEq”的 XMLHttpRequest 已被 CORS 策略阻止：“访问控制- Allow-Origin' 标头的值 'http://localhost:3000' 不等于提供的来源。

前端代码：


    import React, { useState, useEffect } from "react";
import queryString from "query-string";
import io from "socket.io-client";
import { useLocation } from "react-router-dom";



const Chat = () => { 
     let location = useLocation();
const [ name, setName ] = useState('');
const [ room, setRoom ] = useState('');
const ENDPOINT = 'localhost:3000/chat';
 
useEffect(() => {
    const { name, room } = queryString.parse(location.search)

 const socket = io(ENDPOINT); 
  
    setName(name);
    setRoom(room); 

    socket.emit('join', { name, room });

}, [ENDPOINT, location.search]);

    return(  
        <h1>Chat</h1>
    )
}
export default Chat;
    
    ```
    
    backend code: 
    
    ```
    require("dotenv").config();
    
    const express = require("express");
    const app = express();
    const server = require('http').createServer(app);
    const io = require('socket.io')(server, {
      cors: {
        origin: "http://localhost:3000",
        methods: ["GET", "POST"],
        allowHeaders: ['x-secret-token'],
        credentials: true
      }
    });
    
    
    
    
    const client = require("./client");
    
    // Run when a client connects
    
    io.on('connection', (socket) => {
      console.log('We have a new connection!');
    
      socket.on('join', ({ name, room }) => {
           console.log(name, room);
      });
    
      socket.on('disconnect', () => {
        console.log('User has left!');
      })
    });
    
    const bodyParser = require("body-parser");
    app.use(bodyParser.json());
    // app.use(express.json)
    const cors = require("cors");
    app.use(cors({
        exposedHeaders: 'x-secret-token',
      }))
    
    //Routers
    
    const registerRouter = require("./Routes/Register");
    app.use("/register", registerRouter);
    
    const loginRouter = require("./Routes/Login");
    app.use("/login", loginRouter);
    
    
    const booksRouter = require("./Routes/Books");
    app.use("/books", booksRouter)
    
    const chat = require("./Routes/Chat");
    app.use("/chat", chat); 
    
    
    
    //Build server
    app.set("port", process.env.port || 3000);
    
    
    
    
    //Start server
    server.listen(app.get("port"), (server) => {
        console.info(`Server listen on port ${app.get("port")}`);
    });

我还尝试添加 socket.io 推荐的客户端代码，如下所示：


    // client-side
    const io = require("socket.io-client");
    const socket = io("https://api.example.com", {
      withCredentials: true,
      extraHeaders: {
        "my-custom-header": "abcd"
      }
    });

但这没有用 - 任何建议都会很棒！

标签： node.jsreactjsexpresssocket.io

node.js - 使用最新版本的 socket.io 时我的 cors 出现问题

问题描述

解决方案

推荐阅读