CORS 和 EXPRESS - [錯誤] 來源 http://<ip address> Access-Control-Allow-Origin 不允許：3000</ip>

Question

我嘗試實現后端和前端應用程序，但即使我使用 cors，它也總是出錯。

請幫助驗證以下代碼：

后端 server.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;

錯誤如下圖：

[錯誤] Access-Control-Allow-Origin 不允許 Origin http://172.20.10.5:3000 。 [錯誤] 由於訪問控制檢查，XMLHttpRequest 無法加載http://172.20.10.5:4001/socket.io/?EIO=4&transport=polling&t=NOu0oIM 。 [錯誤] 加載資源失敗：Access-Control-Allow-Origin 不允許 Origin http://172.20.10.5:3000 。 （socket.io，第 0 行）

Answer 1

使用cors選項。 請參閱處理 CORS 。

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