socket.io XMLHttpRequest 被 CORS 策略阻止

我在

localhost:3000

前端 - javascript - netlify
后端 - node.js v18 - cloudtype

从来源“https://sgschool. netlify.app' 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。 轮询-xhr.js:157

GET /socket.io/?EIO=4&transport=polling&t=OUtUQ08 net::ERR_FAILED 503`

const express = require('express');
const http = require('http');
const socketIO = require('socket.io');
const sqlite3 = require('sqlite3').verbose();

const app = express();

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.setHeader('Access-Control-Allow-Credentials', true);
  next();
});

const server = http.createServer(app);
const io = socketIO(server, {
  cors: {
    origin: '*',
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    allowedHeaders: ['Content-Type', 'Authorization'],
    credentials: true
  }
});

const db = new sqlite3.Database('./clicks.db', (err) => {
  if (err) {
    console.error(err.message);
  } else {
    console.log('Connected to the clicks database.');
  }
});

app.use(express.static('public'));

io.on('connection', (socket) => {
  console.log('User connected');

  socket.on('get_clicks', (callback) => {
    db.all('SELECT * FROM schools', [], (err, rows) => {
      if (err) {
        throw err;
      }
      const clicks = rows.reduce((acc, row) => {
        acc[row.name] = row.clicks;
        return acc;
      }, {});
      callback(clicks);
    });
  });

  socket.on('increment_click', (school) => {
    db.run('UPDATE schools SET clicks = clicks + 1 WHERE name = ?', [school], (err) => {
      if (err) {
        throw err;
      }
      io.emit('click_updated', school);
    });
  });

  socket.on('disconnect', () => {
    console.log('User disconnected');
  });
});

app.get('/api/schools', (req, res) => {
  db.all('SELECT * FROM schools', [], (err, rows) => {
    if (err) {
      res.status(500).send('Error retrieving school data');
      return;
    }
    res.json(rows);
  });
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => console.log(`Server running on port ${PORT}`));

$(document).ready(function () {
  $("#schoolSelect").select2();
  // Sort the options alphabetically, excluding the search-placeholder option
  let sortedOptions = $("#schoolSelect option:not(.search-placeholder)").sort(function (a, b) {
      return a.text.localeCompare(b.text);
  });
  $("#schoolSelect").empty().append(sortedOptions);
  // Re-add the search-placeholder option at the beginning of the list
  let searchPlaceholder = $("<option value='' selected disabled class='search-placeholder'>Search for your school and start CLICKING the IMAGE!</option>");
  $("#schoolSelect").prepend(searchPlaceholder);
});

const clickButton = document.getElementById("clickButton");
const schoolSelect = document.getElementById("schoolSelect");
const leaderboard = document.getElementById("leaderboard");
const schoolStats = document.getElementById("schoolStats");
const myClickCounter = document.getElementById("myClickCounter");
const totalClickCounter = document.getElementById("totalClickCounter");
const schools = {};

let myClicks = 0;
let totalClicks = 0;

// Socket.io implementation
const socket = io("");

socket.once("click_updated", (school) => {
if (schoolSelect.value === school) {
  schools[school]++;
  updateSchoolStats();
}
});

socket.emit("get_clicks", (clicks) => {
Object.assign(schools, clicks);
updateLeaderboard();
if (schoolSelect.value) {
  updateSchoolStats();
}
});

schoolSelect.addEventListener("change", () => {
  if (!schools[schoolSelect.value]) {
      schools[schoolSelect.value] = 0;
  }
  updateSchoolStats();
});

clickButton.addEventListener("click", () => {
  if (schoolSelect.value) {
    if (schools[schoolSelect.value] === undefined) {
      schools[schoolSelect.value] = 0;
    }
    schools[schoolSelect.value]++;
    myClicks++;
    totalClicks++;
    updateLeaderboard();
    updateSchoolStats();
    myClickCounter.textContent = myClicks;
    totalClickCounter.textContent = totalClicks;

    socket.emit("increment_click", schoolSelect.value);
  }
});

clickButton.addEventListener("mousedown", () => {
  clickButton.style.backgroundImage = "url('2.png')";
});

clickButton.addEventListener("mouseup", () => {
  clickButton.style.backgroundImage = "url('1.png')";
});

clickButton.addEventListener("mouseleave", () => {
  clickButton.style.backgroundImage = "url('1.png')";
});

function updateLeaderboard() {
  const sortedSchools = Object.entries(schools).sort((a, b) => b[1] - a[1]);
  const tbody = document.querySelector("#leaderboard tbody");
  tbody.innerHTML = "";
  for (const [index, [school, clicks]] of sortedSchools.entries()) {
      const row = document.createElement("tr");
      const rankCell = document.createElement("td");
      const schoolCell = document.createElement("td");
      const clicksCell = document.createElement("td");
      rankCell.textContent = index + 1;
      schoolCell.textContent = school;
      clicksCell.textContent = `${clicks} clicks`;
      row.appendChild(rankCell);
      row.appendChild(schoolCell);
      row.appendChild(clicksCell);
      tbody.appendChild(row);
  }
}

function updateSchoolStats() {
  if (schoolSelect.value) {
      const selectedSchool = schoolSelect.options[schoolSelect.selectedIndex].text;
      const schoolClicks = schools[schoolSelect.value] || 0;
      const rank = Object.entries(schools)
      .sort((a, b) => b[1] - a[1])
      .findIndex(([key, value]) => key === schoolSelect.value) + 1;
      schoolStats.innerHTML = `Rank: ${rank} | ${selectedSchool} | Clicks: ${schoolClicks}`;
    } else {
      schoolStats.innerHTML = "";
      }
      }