Express.js服务器连接Angular前端失败问题求助

该问题为跨域资源共享（CORS）报错，根因是Angular应用与Express服务运行在不同端口，浏览器同源策略默认拦截了跨域请求，可按以下步骤修复：

1. 服务端配置CORS（核心修复） #

推荐使用cors中间件处理：

• 安装依赖
  npm install cors
• 修改server.js文件，在路由注册前启用CORS：

const cors = require('cors');
// 生产环境建议替换*为你的Angular访问地址，例如http://localhost:4200
app.use(cors({ origin: '*' }));

// 原有路由、监听逻辑保持不变
app.use("/", router);

app.listen(port, function () {
  console.log("Server is running on Port: " + port);
});

router.route("/fetchdata").get(function (req, res) {
  users.find({}, function (err, result) {
    if (err) {
      res.send(err);
    } else {
      res.send(result);
    }
  });
});

如果不想安装第三方依赖，可手动添加响应头中间件，同样放在路由注册前：

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

2. 核对请求地址 #

确认Angular项目中MONGO_EXPRESS_URL的配置与Express服务实际运行地址一致，例如Express运行在3000端口的话，配置应为http://localhost:3000。

3. 增加错误捕获（可选） #

修改users.component.ts的订阅逻辑，添加错误处理方便后续排查问题：

ngOnInit(): void {
  this.userService.getUsers().subscribe({
    next: (users) => this.users = users,
    error: (err) => console.error('获取用户数据失败：', err)
  });
}

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