Vue+Express项目No 'Access-Control-Allow-Origin'错误解决求助

你的问题核心是：socket.io的CORS配置仅针对WebSocket连接生效，而你用axios发起的是普通HTTP请求，需要确保Express的cors中间件正确配置且挂载顺序无误。

具体修复步骤： #

1. 调整Express CORS中间件的挂载顺序 #

必须保证app.use(cors())在所有路由定义之前执行，否则中间件无法作用到/api/chats这类路由上。

2. 明确指定允许的Origin（推荐） #

用通配符*虽然简单，但在携带凭证的请求场景下会失效，更稳妥的方式是指定前端的具体地址：

修改后端代码如下：

const cors = require("cors");
// 先配置Express的CORS中间件，放在路由定义前
app.use(cors({
  origin: "http://localhost:8081", // 明确允许你的前端地址
  credentials: true // 若请求需要携带cookie等凭证，开启此选项
}));

// 再配置socket.io的CORS（如果需要使用WebSocket连接）
const io = require("socket.io")(server, {
  cors: {
    origin: "http://localhost:8081",
    credentials: true
  }
});

3. 验证修复效果 #

发起请求后，打开浏览器开发者工具的网络标签，查看/api/chats请求的响应头，确认存在Access-Control-Allow-Origin: http://localhost:8081。

若问题仍存在，可排查：

• 后端服务是否已重启，确保配置修改生效
• 前端请求地址是否与配置的origin完全一致（包括协议、端口）
• 是否有其他代理或防火墙拦截了请求

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