CORS 和 EXPRESS - [错误] Origin http://<ip address>:3000 不允许 Access-Control-Allow-Origin答案

【问题标题】：CORS and EXPRESS - [Error] Origin http://<ip address>:3000 is not allowed by Access-Control-Allow-OriginCORS 和 EXPRESS - [错误] Origin http://<ip address>:3000 不允许 Access-Control-Allow-Origin
【发布时间】：2021-03-17 22:47:13
【问题描述】：

我尝试实现后端和前端应用程序，但即使我使用 cors，它也总是出错。

请帮忙验证以下代码：

后端服务器.js

const express = require('express');
const http = require('http');
const socketIO = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIO(server);
const cors = require('cors');

const ds18b20 = require('ds18b20');

const port = 4001;
const getTemperature = require('./utils/temperature');

let interval;

io.on("connection", (socket) => {
  console.log("New client connected");
  if(interval) {
    clearInterval(interval);
  }

  var sensorId = [];
  ds18b20.sensors((err, id) => {
    sensorId = id;
    socket.emit('sensors', id);
  });

  setInterval(() => {
    sensorId.forEach((id) => {
      ds18b20.temperature(id, (err, value) => {
        console.log(value);
        socket.emit('FromAPI', {'id': id, 'value': value});
      });
    });
  }, interval);

  socket.on("disconnect", () => {
    console.log("Client disconnected");
    clearInterval(interval);
  });
});

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});

app.get('/', (req, res) => {
  res.send('Hi');
});
server.listen(port, () => console.log(`Listening on port ${port}`));

来自 create-react-app 的前端 App.js

import React, { useState, useEffect } from 'react';
import socketIOClient from 'socket.io-client';
// import { Button, Input } from 'react-bootstrap';

const ENDPOINT = "http://172.20.10.5:4001";
const socket = socketIOClient(ENDPOINT);

function App() {
  const [response, setResponse] = useState("");

  useEffect(() => {
    socket.on("FromAPI", data => {
      setResponse(data);
    })
  }, [])

  return (
    <p>
      Temp is {response.value} degree celsius
    </p>
  )
}

export default App;

如下所示的错误：

[错误] Origin http://172.20.10.5:3000 不允许访问控制允许来源。 [错误] XMLHttpRequest 无法加载 http://172.20.10.5:4001/socket.io/?EIO=4&transport=polling&t=NOu0oIM 由于访问控制检查。 [错误] 加载资源失败：Origin 访问控制允许来源不允许http://172.20.10.5:3000。（socket.io，第 0 行）

【问题讨论】：

标签： javascript reactjs express socket.io cors

【解决方案1】：

使用cors 选项。参考Handling CORS。

const io = socketIO(server, {
  cors: {
    origin: "*"
  }
})

【讨论】：