如何修复以下 CORS 错误和轮询错误答案

【问题标题】：How do I fix the following CORS error and polling error如何修复以下 CORS 错误和轮询错误
【发布时间】：2021-05-03 03:34:39
【问题描述】：

如何修复以下 CORS 错误和轮询错误

在“http://localhost:8000/socket.io/?EIO=4&transport=polling&t=NaidU9N”访问 XMLHttpRequest 来自原点“http://127.0.0.1:5500”已被 CORS 策略阻止：没有“Access-Control-Allow-Origin” 请求的资源上存在标头。

polling-xhr.js:203 GET http://localhost:8000/socket.io/?EIO=4&transport=polling&t=NaidU9N net::ERR_FAILED

这个错误会在 1 秒后自动出现。它需要什么改变？

控制台中不断出现轮询错误，我无法在此聊天网站上接收任何人的消息，我可以发送消息但另一端没有接收到。

我的 HTML

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ichat App</title>
        <script defer src="http://localhost:8000/socket.io/socket.io.js"></script>
        <script defer src="js/client.js"></script>
        <link rel="stylesheet" href="css/style.css">
    </head>
    
    <body>
        <nav>
            <img src="icon.jpg" class="logo">
        </nav>
        <div class="container">
            <div class="message left">Hiiii</div>
            <div class="message right"> Who are you
            </div>
        </div>
        <div class="send">
            <form action="#" id="send-container">
                <input type="text" name="messageInp" id="messageInp">
                <button class="btn" type="submit">Send</button>
            </form>
        </div>
    </body>
    
    </html>

我的 index.js（节点服务器）：-

    //  node server which will handle socket io connection
    
    const io = require('socket.io')(8000)
    const users = {};
    
    io.on('connection', socket => {
        socket.on('new-user-joined', name => {
            console.log("New User", name);
            users[socket.id] = name;
            socket.broadcast.emit('user-joined', name);
        });
    
        socket.on('send', message => {
            socket.broadcast.emit('receive', { message: message, name: users[Socket.id] })
        });
    
        socket.on('disconnect', message => {
            socket.broadcast.emit('left', users[socket.id])
            delete users[socket.id];
        });
    })

我的客户端.js

const socket = io('http://localhost:8000');

const form = document.getElementById('send-container');

const messageInput = document.getElementById('messageInp');
const messageContainer = document.querySelector(".container");
var audio = new Audio('ting.mp3')
const append = (message, position) => {
    const messageElement = document.createElement('div');
    messageElement.innerText = message;
    messageElement.classList.add('message')
    messageElement.classList.add(position);
    messageContainer.append(messageElement);
    if (position == 'left') {
        audio.play();

    }
}

const name = prompt("Enter your Name to login");
socket.emit('new-user-joined', name);

socket.on('user-joined', name => {
    append(`${name} joined the chat`, 'right')
})

socket.on('receive', data => {
    append(`${data.name}:${data.message}`, 'left')
})

socket.on('left', name => {
    append(`${name} left the chat`, 'right')
})

form.addEventListener('submit', (e) => {
    e.preventDefault();
    const message = messageInput.value;
    append(`you:${message}`, 'right');
    socket.emit('send', message);
    messageInput.value = ' ';
})

package.json

    {
      "name": "nodeserver",
      "version": "1.0.0",
      "description": "This is a node server for our ichat application",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "Manish",
      "license": "ISC",
      "dependencies": {
        "cors": "^2.8.5",
        "nodemon": "^2.0.7",
        "socket.io": "^4.0.1"
      }
    }

}

【问题讨论】：

标签： javascript node.js sockets socket.io

【解决方案1】：

您的 cors 问题是由于您的服务器配置错误造成的。该文档提供了有关如何正确配置的示例。我已将其更改为使用您的 ip 和端口。

const io = require("socket.io")(httpServer, {
  cors: {
    origin: "http://127.0.0.1:5500",
    methods: ["GET", "POST"]
  }
});

您可以在此处找到 socket.io 文档：https://socket.io/docs/v3/handling-cors/

您可以在此处了解有关 cors 的更多信息：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

【讨论】：