Access-Control-Allow-Origin 错误，即使启用了 cors

Question

我正在我的树莓派上创建一个 Web 服务器，在该服务器上托管一个用于使用 Node.js 和数据库进行植物水分控制的网站。它的工作原理如下： Node.js 连接到数据库并显示表中的所有项目。当用户与表交互时，通过单击 td 元素并对其进行修改，如果格式正确，该元素就会被发送到数据库。这适用于树莓派本地主机：3000，但是当我用我的计算机连接到它时，我收到以下错误：

Access to XMLHttpRequest at 'http://localhost:3000/socket.io/?EIO=4&transport=polling&t=OvqJ4FV' from origin 'http://192.168.0.101:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
manager.js:108 
        
        
       GET http://localhost:3000/socket.io/?EIO=4&transport=polling&t=OvqJ4FV net::ERR_FAILED
value @ polling.js:298
i @ polling.js:237
value @ polling.js:190
value @ polling.js:215
value @ polling.js:96
value @ polling.js:56
value @ transport.js:46
value @ socket.js:170
a @ socket.js:111
value @ manager.js:108
(anonymous) @ manager.js:328
Show 9 more frames
Show less

这是main.cjs文件：

const express = require('express');
const axios = require('axios');

const http = require('http');
const socketIo = require('socket.io');
var mysql = require('mysql2');

var plantData = mysql.createPool({
  host: 'localhost',
  user: 'root',
  password: '',
  database: "plants",
  waitForConnections: true,
  connectionLimit: 10,
  queueLimit: 0
});

const app = express();

const cors = require("cors");
const port2 = 5110;

app.listen(port2);
console.log("" + 3000);

app.use("*", cors());

const server = http.createServer(app);
server.listen(3000);
var io = socketIo(server);

app.set("view engine", "ejs");
app.set("views", "src2");

app.use(express.static("src2"));

app.get("/", (req, res) => {
  res.render("ejs/main.ejs");
  res.setHeader("Allow-Access-Control-Header", "*");
});
var howManyPlants = 0;

app.get("/plants", (req, res) => {
  return new Promise((resolve, reject) => {
      plantData.query("SELECT * FROM `plants` order by id asc"
        , (err, results) => {
          if (err) {
            console.log(err);
          } else {
            resolve(results);
          }
          var plants = results;
          //res.setHeader("Allow-Access-Control-Header", "*");
          res.json(plants);
          
          howManyPlants = plants.length;
        });
    });
});

app.get("/maxPlantId", (req, res) => {
  new Promise((resolve, reject) => {
    plantData.query(`Select max(id) from plants`, (err, results) => {
      if (err) {
        console.log(err);
      } else {
        resolve(results);

        plantIdNow = res.json(results);
      }
    });
  });
});

io.on("connection", (socket) => {
  socket.on("setAllPlantsTime", (time) => {
    return new Promise((resolve, reject) => {
      console.log("1");
      plantData.query(`UPDATE plants set plantTime = "${time}"`, (err, results) => {
        if (err) {
          console.log(err);
        } else {
          resolve(results);
        }
      });
  });
  });

  socket.on("changePlantProperty", (property) => {
    var plantId = property.id;
    var plantProperty = property.property;
    var plantPropertyValue = property.value;

    console.log(plantId + " " + plantProperty + " " + plantPropertyValue);

    return new Promise((resolve, reject) => {
      plantData.query(`UPDATE plants set ${plantProperty} = "${plantPropertyValue}" where id = ${plantId}`, (err, results) => {
        console.log(`UPDATE plants set ${plantProperty} = "${plantPropertyValue}" where id = ${plantId}`);
        if (err) {
          console.log(err);
        } else {
          resolve(results);
        }
      });
    });
  });

  socket.on("deletePlant", (plantId) => {
    return new Promise((resolve, reject) => {
      plantData.query(`Delete from plants where id = ${plantId}`, (err, results) => {
        if (err) {
          console.log(err);
        } else {
          resolve(results);
        }
      });
    });
  });

  socket.on("createPlant", (plantInput) => {
    var plantId = plantInput.id;
    var plantTime = plantInput.plantTime;
    var plantWeekDays = plantInput.plantWeekDays;
    var plantWater = plantInput.plantWater;

    console.log(plantId + " " + plantTime + " " + plantWeekDays + " " + plantWater);

    return new Promise((resolve, reject) => {
      plantData.query(`INSERT INTO plants VALUES ('` + plantId +`','` + plantTime + `','` + plantWeekDays + `','` + plantWater + `')`, (err, results) => {
        if (err) {
          console.log(err);
        } else {
          resolve(results);
        }
      });
    });
  });

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

module.exports = {
  io
}

我尝试过不同的教程，但没有一个有效。我用的是xampp。

Answer 1

如果您正在测试 API，您可以使用 Google Chrome 的 CORS Unblock 扩展。 启用它，它将绕过 CORS 策略。