猿问

Socket IO 和 Express Cross origin 错误或控制台中未找到 404 错误

尽管运行 cors 库，但我还是遇到了跨源标头错误，或者只是在控制台中轮询时未找到 404。

项目结构如下所示

我的目标是在每个视图上都有小聊天小部件。我会将其作为 EJS 部分包含到其他视图中。

我不确定我出了什么问题，我尝试在端口 5000 上运行 Express，在 8080 或 3000 上运行 Socket IO，所有不同的组合都没有产生任何好处。

前端部分EJS看起来像这样


<ul id="messages"></ul>

<form action="/" method="POST" id="chatForm">

<input id="txt" autocomplete="off" autofocus="on" oninput="isTyping()" placeholder="type your message 

 here..." /><button>Send</button>

</form>

前端页面的其余部分如下所示


  <head>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.js" integrity="sha512-aMGMvNYu8Ue4G+fHa359jcPb1u+ytAF+P2SCb+PxrjCdO3n3ZTxJ30zuH39rimUggmTwmh2u7wvQsDTHESnmfQ==" crossorigin="anonymous"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style> etcetc



<%- include ('./partialChatWidget.ejs') %>

还有JS


<Script> 

var socket = io.connect('http://localhost:5000', { transport : ['websocket'] } );


$('form').submit(function(e){

    e.preventDefault(); 

    socket.emit('chat_message', $('#txt').val());

    $('#txt').val('');

    return false;

});


socket.on('chat_message', function(msg){

    $('#messages').append($('<li>').html(msg));

});


socket.on('is_online', function(username) {

    $('#messages').append($('<li>').html(username));

});


var username = prompt('Please tell me your name');

socket.emit('username', username);

</script>

那么这里出了什么问题，我需要在不同端口上有2个服务器还是2个实例，我一直认为socket IO借用了http服务器，而不是express实例。


谢谢你的协助。我可能会补充说，当我尝试在 2 个不同的端口上运行时，会出现跨源错误。否则我会在控制台中找不到 404。页面以及部分和初始 JS(Jquery) 运行。


一只甜甜圈
浏览 135回答 3
3回答

一只萌萌小番薯

经过一番来来回回......只需确保尽快将套接字 IO 的前端链接加载到头部即可。并将这部分包含在前端var socket = io.connect('http://localhost:5000', { transport : ['websocket'] } );一定要在服务器端包含这个，这不会有什么坏处，除非你想阻止某些页面进行 CORS 访问app.use(cors({origin: '*'}))&nbsp;接下来的 2 个步骤使一切顺利。const app = express();const http = require('http').Server(app);const io = require('socket.io')(http,{cors: {origin: "http://localhost:5000 {this is the port of your back end app, not for the socket IO port }",credentials: true}})&nbsp;最后，确实是 2 台服务器。const server = http.listen(8080, function() {console.log('listening on *:8080');});app.listen(5000, console.log("App Running on http://localhost:5000"));我花了一段时间，但现在一切都一劳永逸了（我希望）
0

鸿蒙传说

试试这个代码`const server = app.listen(PORT,()=>console.log(`listening on port ${PORT}`));io = require('socket.io').listen(server);io.on('connection', (socket) => {console.log('a user connected');});`
0

慕仙森

app.use((req,res, next)=>{res.setHeader('Access-Control-Allow-Origin',"http://localhost:3000");res.setHeader('Access-Control-Allow-Headers',"*");res.header('Access-Control-Allow-Credentials', true);next();});使用此代码并安装较旧的 socket.io 版本 2.3.0
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答