如何修復以下 CORS 錯誤和輪詢錯誤

Question

如何修復以下 CORS 錯誤和輪詢錯誤

從源“http://127.0.0.1:5500”訪問“http://localhost:8000/socket.io/?EIO=4&transport=polling&t=NaidU9N”處的 XMLHttpRequest 已被 CORS 政策阻止Control-Allow-Origin' header 存在於請求的資源上。

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"
      }
    }

}

Answer 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

如何修復以下 CORS 錯誤和輪詢錯誤

問題描述

我的 HTML

我的 index.js（節點服務器）：-

package.json

1 個解決方案

解決方案1
0 2021-05-03 06:14:45

如何修復以下 CORS 錯誤和輪詢錯誤

問題描述

我的 HTML

我的 index.js（節點服務器）：-

package.json

1 個解決方案

解決方案1 0 2021-05-03 06:14:45

解決方案1
0 2021-05-03 06:14:45