NodeJS+Express+Socket.IO服务GET请求404，资源加载失败求助

出现的错误信息 #

:5500/socket.io/?EIO=4&transport=polling&t=PDfbnR8:1 
Failed to load resource: the server responded with a status of 404 (Not Found)

manager.js:108 
GET http://127.0.0.1:5500/socket.io/?EIO=4&transport=polling&t=PDfboDf 404 (Not Found)

核心错误：

Cannot GET /socket.io/

服务端代码 #

let connections = [];
let initialRun = [];

// Middleware
const sqlite3 = require("sqlite3"); // Database package
const db = new sqlite3.Database("Highscores.db");
const cors = require('cors');
const express = require("express"); // Acting as client
const app = express();
const socket = require("socket.io");
app.use(cors());
app.use(express.static("Public"));  // Attaches my client-side files to the program
// ----------------

// Server API
const PORT = 3000;
var server = app.listen(PORT, function(){   // Displays that the server is running after checking for 3 secs
    console.log("CORS-enabled web server is listening on port 3000");
});
var io = socket(server, {
    cors: {
        origin: "http://127.0.0.1:3000/",
        methods: ["GET", "POST"]
    }
});
io.on("connection", connected); // Listens for a connection
// ---------------------

客户端代码 #

let socket = io.connect({
    withCredentials: true,

    transportOptions: {
        polling: {
            extraHeaders: {
                "my-custom-header": "abcd"
            }
        }
    }
});;    // Provides the ability for a socket connection to occur

问题分析与解决方法 #

1. Socket.IO 404 错误修复 #

• 错误根源：服务端运行在3000端口，但客户端默认连接当前页面所在的5500端口，导致找不到Socket.IO路由。
• 客户端代码修改：指定正确的Socket.IO服务器地址

  let socket = io.connect("http://127.0.0.1:3000", {
      withCredentials: true,
      transportOptions: {
          polling: {
              extraHeaders: {
                  "my-custom-header": "abcd"
              }
          }
      }
  });
  

• 服务端CORS配置调整：允许客户端所在的5500端口访问

  var io = socket(server, {
      cors: {
          origin: "http://127.0.0.1:5500",
          methods: ["GET", "POST"],
          credentials: true
      }
  });
  

  开发环境可临时用origin: "*"允许所有来源调试。

2. 数据库运行异常排查 #

当前服务端仅初始化了数据库，无实际操作逻辑，需补充代码验证：

• 添加数据库连接与操作测试代码：

  db.serialize(() => {
      // 初始化表
      db.run("CREATE TABLE IF NOT EXISTS highscores (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, score INTEGER)", (err) => {
          if (err) {
              console.error("建表失败:", err);
              return;
          }
          console.log("表初始化成功");
          // 插入测试数据
          db.run("INSERT INTO highscores (name, score) VALUES (?, ?)", ["TestUser", 1000], (err) => {
              if (err) {
                  console.error("插入失败:", err);
                  return;
              }
              console.log("测试数据插入成功");
              // 查询验证
              db.all("SELECT * FROM highscores", (err, rows) => {
                  if (err) {
                      console.error("查询失败:", err);
                      return;
                  }
                  console.log("当前数据库数据:", rows);
              });
          });
      });
  });
  

• 确认Highscores.db文件位于服务端代码根目录，路径无误。

内容的提问来源于stack exchange，提问作者TigerBeast997