已配置CORS仍提示‘Access-Control-Allow-Origin缺失’问题求助

Socket.io连接及监听器功能正常，但Express路由处理数据库交互时，前端fetch请求的预检（preflight）检查失败，提示“CORS header ‘Access-Control-Allow-Origin’ missing”。已配置cors中间件及Socket.io的CORS参数，调整配置位置、关闭浏览器安全策略等方法均无效。

相关代码片段 #

server.js #

const express = require('express');
const app = express();
const http = require('http');
const { Server } = require("socket.io");
const cors = require('cors');

const chatSocket = require('./socketListeners/chatListeners');
const room = require('./socketListeners/roomListeners');

const createRouter = require('./routes/create');

app.use('/creategame', createRouter);

app.use(cors());

const server = http.createServer(app);

const io = new Server(server, {
    cors: {
        origin: 'http://localhost:5173',
        methods: ['POST', 'PUT']
    }
});

io.on('connection', (socket) => {
    console.log('a user connected');

    chatSocket(socket);
    room(socket);
});

server.listen(3000, () => {
    console.log('server listening on port 3000');
});

create.js（路由文件） #

const express = require('express');
const router = express.Router();
const Room = require('../models/room');

router.post('/:id', async (req, res) => {    
    const room = new Room({
      roomId: req.params.id,
    });
    try {
        await room.save();
        console.log(room);
    } catch (error) {
        console.error(error);
    }
});

router.put('/:id/dicenum', async (req, res) => {    
    try {
        const room = await Room.find({roomId: req.params.id});
        room.diceNum = req.body.diceNum;
        await room.save();
        console.log(room);
    } catch(error) {
        console.error(error);
    }
});

module.exports = router;

前端React组件调用代码 #

useEffect(() => {
    fetch(`http://localhost:3000/creategame/${id}`, {
      method: 'POST'
    });
  }, []);
  
  useEffect(() => {      
    fetch(`http://localhost:3000/creategame/${id}/dicenum`, {
      method: 'PUT',
      body: {
        diceNum: numOfDice
      }
    });
  }, [numOfDice]);

预检响应头 #

HTTP/1.1 200 OK
X-Powered-By: Express
Allow: PUT
Content-Type: text/html; charset=utf-8
Content-Length: 3
ETag: W/"3-CRsM5C6wvZYWnqALFt2Tj21jrJU"
Date: Fri, 21 Jun 2024 20:22:05 GMT
Connection: keep-alive
Keep-Alive: timeout=5

修复方案 #

1. 调整CORS中间件注册顺序 #

CORS中间件必须在路由注册之前加载，否则路由请求不会经过CORS处理。修改server.js的顺序：

// 先注册CORS中间件
app.use(cors({
    origin: 'http://localhost:5173', // 明确指定前端地址，增强安全性
    methods: ['GET', 'POST', 'PUT']
}));
// 添加JSON解析中间件，用于解析前端请求体
app.use(express.json());
// 再注册路由
app.use('/creategame', createRouter);

2. 完善路由响应逻辑 #

当前路由未返回任何响应，Express会默认返回200但不会携带CORS头（因中间件顺序错误），同时前端无法判断请求结果。修改create.js：

router.post('/:id', async (req, res) => {    
    const room = new Room({
      roomId: req.params.id,
    });
    try {
        await room.save();
        console.log(room);
        res.status(201).json({ success: true, room }); // 返回创建成功的响应
    } catch (error) {
        console.error(error);
        res.status(500).json({ success: false, error: error.message }); // 返回错误响应
    }
});

router.put('/:id/dicenum', async (req, res) => {    
    try {
        // find返回数组，改用findOne查询单个文档
        const room = await Room.findOne({roomId: req.params.id});
        if (!room) {
            return res.status(404).json({ success: false, message: '房间不存在' });
        }
        room.diceNum = req.body.diceNum;
        await room.save();
        console.log(room);
        res.json({ success: true, room }); // 返回更新成功的响应
    } catch(error) {
        console.error(error);
        res.status(500).json({ success: false, error: error.message });
    }
});

3. 修正前端fetch请求格式 #

PUT请求的body需要转为JSON字符串，并设置Content-Type头，否则后端无法解析请求体，同时可能触发额外的预检检查：

useEffect(() => {      
    fetch(`http://localhost:3000/creategame/${id}/dicenum`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json' // 指定请求体格式
      },
      body: JSON.stringify({
        diceNum: numOfDice
      })
    });
}, [numOfDice]);

问题根源总结 #

• CORS中间件注册顺序错误，路由请求未经过CORS处理，导致预检请求缺少Access-Control-Allow-Origin头。
• 路由未返回响应，Express默认响应未携带CORS头，同时前端无法确认请求状态。
• 前端PUT请求未正确格式化请求体，后端无法解析req.body，引发额外的预检问题。

内容的提问来源于stack exchange，提问作者user25669529