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

Posted 2023-03-04

【中文标题】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-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 行）

【参考方案1】：

使用cors 选项。参考Handling CORS。

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