这是index.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>Secret</title>
<script defer src="http://localhost:8000/socket.io/socket.io.js"></script>
<script defer src="./client/client.js"></script>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="main">
<div class="head">this is a chat app</div>
<div class="container">
<div class="message right">Lorem ipsum dolor sit qui.</div>
<div class="message left">Lorem ipsum dolor sit, amet consectetur adipisicin</div>
</div>
<div class="send">
<form action="#" id="send_msg">
<input type="text" name="messageInput" placeholder="type message😐" id="text">
<button class="btn" type="submit">send</button>
</form>
</div>
</div>
</body>
</html>这是client.js代码
const socket=io('http://localhost:8000');
//get dom elements in a js variable;
const form=document.getElementById('send_msg');
const messageInput=document.getElementById("messageInput");
const messageBox=document.getElementsByClassName("container")
const audio=new Audio('ring.mp3')
const append=(message,position)=>{
const msgElm=document.createElement('div');
msgElm.innerHTML=message;
msgElm.classList.add('message');
msgElm.classList.add(position);
messageBox.append(msgElm);
if(position=='left'){
audio.play()
}
}
const name=prompt("Enter your name to join");
socket.emit('new-user-joined',name)
socket.emit('user-joined',name=>{
append(`${name} joined the chat`,'left');
})
socket.emit('receive',name=>{
append(`${data.name}:${data.message}`,'left');
})
socket.emit('left',name=>{
append(`${name}: leave the chat`,'left');
})
form.addEventListener('submit',(e)=>{
e.preventDefault();
const msg=messageInput.value;
append(`You: ${message}`,'right');
socket.emit('send',message);
messageBox.value="";
});此nodeJS代码
//Node server which will handle socket io connections
const express=require('express');
const app=express();
const io=require('socket.io')(8000);
const cors=require('cors');
app.use(cors({
origin: "http://127.0.0.1:5500/index.html",
}))
const users={};
io.on('connection',socket=>{
// if any new user joins,let other users connected to the server know
socket.on('new-user-joined',name=>{
console.log(name);
users[socket.id]=name;
socket.broadcast.emit('user-joined',name);
});
//if someone sends a message,broadcast it to other people
socket.on('send',message=>{
socket.broadcast.emit('receive',{message:message,name:users[socket.id]})
});
//if someone leaves the chat, let others know
socket.on('disconnect',message=>{
socket.broadcast.emit('left',users[socket.id]);
delete users[socket.id];
})
})这里是错误
"访问位于"的XMLHttpRequesthttp://localhost:8000/socket.io/?EIO=4&transport=轮询&t=Npx4qzO'来自原点'http://127.0.0.1:5500'已被CORS策略阻止：请求的资源上不存在"Access Control Allow Origin"标头。
localhost:8000/socket.io/？EIO＝4&transport=轮询&t=Npx4qzO:1无法加载资源：net:：ERR_Failed
得到http://localhost:8000/socket.io/?EIO=4&transport=轮询&t=Npx4x79 net:：ERR_FAILED"；
图像中心图像描述此处
您可以使用单机版运行socket.io。
const { Server } = require("socket.io");
const io = new Server({
cors: {
origin: "http://127.0.0.1:5500",
methods: ["GET", "POST"]
}
});
io.on("connection", (socket) => {
// Socket codes...
});
io.listen(8000);
尝试：
app.use(cors({
origin: "http://localhost",
}))
或者要允许所有，请使用此，然后更改它。这是用于验证\测试。
app.use(cors())
试试这个这是更详细的，让你对CORS配置有更多的控制
// Add a new entry of link that you wish to allow
const allowedOrigins = [
'capacitor://localhost',
'ionic://localhost',
'http://localhost'
];
// Reflect the origin if it's in the allowed list or not defined (cURL, Postman, etc.)
const corsOptions = {
origin: (origin, callback) => {
if (allowedOrigins.includes(origin) || !origin) {
callback(null, true);
} else {
callback(new Error('Origin not allowed by CORS'));
}
},
};
//Node server which will handle socket io connections
const express=require('express');
const app=express();
const io=require('socket.io')(8000);
const cors=require('cors');
app.use(cors({
origin: "http://127.0.0.1:5500/index.html",
}))
const users={};
io.on('connection',socket=>{
// if any new user joins,let other users connected to the server know
socket.on('new-user-joined',name=>{
console.log(name);
users[socket.id]=name;
socket.broadcast.emit('user-joined',name);
});
//if someone sends a message,broadcast it to other people
socket.on('send',message=>{
socket.broadcast.emit('receive',{message:message,name:users[socket.id]})
});
//if someone leaves the chat, let others know
socket.on('disconnect',message=>{
socket.broadcast.emit('left',users[socket.id]);
delete users[socket.id];
})
})要允许从客户端(即网页(到服务器(即Node.js服务器(的跨源请求，请在服务器端使用以下代码段：
const io = new Server({
cors: {
origin: "http://127.0.0.1:5500",
methods: ["GET", "POST"]
}
});