策略阻止"/>
socket.io XMLHttpRequest 被 CORS 策略阻止
我在
localhost:3000
上运行时很好,但是一旦部署它就一直显示这个错误。我已经部署在 2 个不同的平台上,如下所示:
前端 - 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 = "";
}
}
回答如下:
更多推荐
socket.io XMLHttpRequest 被 CORS 策略阻止
发布评论