Socket IO 和 Express Cross origin 错误或 404 not found 控制台中的错误答案

【问题标题】：Socket IO and Express Cross origin error or 404 not found error in consoleSocket IO 和 Express Cross origin 错误或 404 not found 控制台中的错误
【发布时间】：2021-03-29 07:53:06
【问题描述】：

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

项目结构是这样的

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

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

APP.JS 是这样的

const { check } = require('express-validator');
const express = require("express");
const session = require("express-session");
const MongoDBStore = require("connect-mongodb-session")(session);
const config = require("config");
const flash = require('express-flash');
const cookieParser = require('cookie-parser');
const nodemailer = require("nodemailer");
const Mailgen = require("mailgen");
const dotenv = require('dotenv');
dotenv.config();
const appController = require("./controllers/appController");
const isAuth = require("./middleware/is-auth");
const connectDB = require("./config/db");
const mongoURI = config.get("mongoURI");
const bodyParser = require('body-parser');

var cors = require('cors')     // This should help, but does nothing
const app = express();       
const http = require('http').Server(app);      // I suspect the mistake is in these lines
const io = require('socket.io')(http,
{
cors: {
origin: "http://localhost:5000",              // Does nothing
credentials: true
}})

connectDB();

const store = new MongoDBStore({
uri: mongoURI,
collection: "mySessions",
}); 
app.use(cors({origin: '*'}))                       // Also seems not to be working

app.set("view engine", "ejs");
app.use(express.urlencoded({ extended: true }));




//Middleware and Routes



io.sockets.on('connection', function(socket) {
console.log("hello")         // never happened
socket.on('username', function(username) {
console.log("hello")            // never happened

  socket.username = username;
  io.emit('is_online', '???? <i>' + socket.username + ' join the chat..</i>');
  });

  socket.on('disconnect', function(username) {
  io.emit('is_online', '???? <i>' + socket.username + ' left the chat..</i>');
  })

  socket.on('chat_message', function(message) {
  io.emit('chat_message', '<strong>' + socket.username + '</strong>: ' + message);
  });

  });

  app.listen(5000, console.log("App Running on http://localhost:5000"));

而前端部分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 server，而不是 express 实例。

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

【问题讨论】：

标签： javascript jquery node.js express socket.io

【解决方案1】：

经过很多次来回......

只要确保尽快在头部加载套接字 IO 的前端链接。

并在前端包含这部分

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

一定要在服务器端包含这个，这不会有什么坏处，除非你想阻止某些页面访问 CORS

app.use(cors({origin: '*'}))

接下来的 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
}})

最后，确实是 2 台服务器。

const server = http.listen(8080, function() {
console.log('listening on *:8080');
});
app.listen(5000, console.log("App Running on http://localhost:5000"));

花了我一段时间，但现在一切都一劳永逸了（我希望）

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

试试这个代码

`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');
});`

【讨论】：