我嘗試實(shí)現(xiàn)后端和前端應(yīng)用程序,但即使我使用 cors,它也總是出現(xiàn)錯(cuò)誤。請(qǐng)幫忙驗(yàn)證一下下面的代碼:后端服務(wù)器.jsconst 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.jsimport 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); }) }, [])錯(cuò)誤如下圖所示:[錯(cuò)誤] Access-Control-Allow-Origin 不允許來源http://172.20.10.5:3000 。[錯(cuò)誤] 由于訪問控制檢查, XMLHttpRequest 無法加載http://172.20.10.5:4001/socket.io/?EIO=4&transport=polling&t=NOu0oIM 。[錯(cuò)誤] 無法加載資源: Access-Control-Allow-Origin 不允許Origin http://172.20.10.5:3000 。(socket.io,第 0 行)
CORS 和 EXPRESS - [錯(cuò)誤] Access-Control-Allow-Origin
catspeake
2023-10-14 16:49:08