You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

已显式允许仍遭CORS拦截:localhost跨域请求问题求助

问题原因分析

你给Socket.IO服务器配置的CORS规则只作用于Socket.IO相关的连接(比如WebSocket握手),但前端调用的/user是Express的普通HTTP接口,这部分请求的CORS需要通过Express的cors中间件处理,和Socket.IO的配置无关。

解决方案
  1. 在Express路由注册之前,添加cors中间件配置,允许localhost:3000的跨域请求。
  2. 确保中间件顺序正确:cors要在路由之前加载,否则路由不会应用CORS规则。

修改后的后端代码如下(标注了新增/调整部分):

const express = require('express')
const { createServer } = require("http");
const cors = require('cors')
const { Server } = require("socket.io");
const app = express();
const httpServer = createServer(app);
const {errorHandler} = require('./middleware/errorMiddleware')
const {connectDB} = require('./config/db');
const port = process.env.PORT || 4000
require('dotenv').config()

connectDB()

//TEST logic for creating local list
const usersWaiting = []

//initialize Socket.io server
const io = new Server(httpServer, {
    cors: {origin: "http://localhost:3000", methods: ["GET"]}
});

// --- 新增:配置Express的CORS中间件,放在路由之前 ---
app.use(cors({
  origin: "http://localhost:3000",
  methods: ["GET", "POST", "PUT", "DELETE"] // 根据接口需求添加对应方法
}))

//configure everything, define routes
app.use(express.json())
app.use(express.urlencoded({extended: false}))
app.use('/user', require('./routes/userRoute'))
app.use(errorHandler)
 
//set 404
app.use((req, res, next) => {
    res.status(404).send('Not found.')
})

//start the listening
httpServer.listen(port, () => {console.log(`Server started on port ${port}.`)})
补充说明
  • 如果/user接口需要处理POST等其他方法,必须在cors配置的methods里添加对应方法,否则会触发方法不允许的CORS错误。
  • 若后续需要允许多个域名,可将origin设为数组,比如origin: ["http://localhost:3000", "https://your-production-domain.com"]。

内容的提问来源于stack exchange,提问作者woo

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.26 06:15:39