如何解决部署到DigitalOcean后Express服务器Post请求失效问题

一、修正前端请求配置 #

1. 替换请求URL为服务器域名/IP或相对路径 #

本地的http://localhost:4200/ping在部署后无法访问，直接改为服务器公网域名（如https://xxx.yyy.com/ping），或者用相对路径（推荐，无需随环境修改）：

// component.ts 修改后
callServer(body: any) {
  const headers = new HttpHeaders()
        .set('Content-Type', 'application/json');

  const content = { body: body };

  // 相对路径自动匹配当前页面的域名和协议
  this.http.post("/ping", content, { headers: headers })
    .subscribe({
      next: data => console.log('请求成功', data),
      error: err => console.error('请求失败', err) // 新增错误日志，方便排查
    });
}

2. 移除前端不必要的响应头 #

Access-Control-Allow-Origin和Access-Control-Allow-Credentials是后端返回给前端的响应头，前端请求时不需要携带，直接删除即可。

3. 避免手动序列化请求体 #

Angular的HttpClient会自动将对象序列化为JSON字符串，无需手动调用JSON.stringify()，否则后端可能无法正确解析请求体。

二、修复后端CORS配置冲突 #

服务器代码中同时使用了cors中间件和自定义res.header中间件，两者会导致CORS头重复或冲突，保留其中一种即可：

// server.js 修改后
// 删除自定义的CORS中间件
// app.use(function(req, res, next) {
//   res.header("Access-Control-Allow-Origin", "*");
//   ...
//   next();
// });

// 保留cors中间件，确保origin为前端实际部署域名
var corsOptions = {
  origin: 'https://xxx.yyy.com', // 替换为前端真实域名（注意HTTP/HTTPS协议）
  optionsSuccessStatus: 200,
  credentials: true // 需要携带Cookie时开启
}
app.use(cors(corsOptions)); 

测试阶段可临时将origin设为*，生产环境建议指定具体域名保障安全。

三、检查服务器环境配置 #

1. 开放服务器端口 #

DigitalOcean默认防火墙（UFW）会限制端口访问，确保后端端口（如4200）已开放：

# 开放4200端口
sudo ufw allow 4200
# 重启防火墙
sudo ufw reload
# 查看开放端口列表
sudo ufw status

若使用80/443端口（默认HTTP/HTTPS端口），无需额外开放，但需确保应用有权限运行（可使用sudo启动）。

2. 确认端口占用与环境变量 #

检查端口是否被其他进程占用：

# 查看4200端口占用情况
lsof -i :4200

同时确认.env文件中的PORT配置正确，或直接使用默认端口4200。

3. 修正静态文件路径 #

确保前端打包文件路径正确，app.get('/*')需与express.static路径匹配：

// server.js 修改后
app.use(express.static(path.join(__dirname, '/dist/xxxxx')));

app.get('/*', (req,res) => res.sendFile(path.join(__dirname, '/dist/xxxxx/index.html')));

原代码中public目录可能不存在，导致前端页面无法加载，进而无法发送请求。

四、添加错误日志定位问题 #

• 前端：在subscribe中新增错误回调，查看控制台的CORS/网络错误信息。
• 后端：在/ping接口中添加错误捕获，便于查看服务器日志：

app.post('/ping', async function (req, res) {
  try {
    let response = req.body;
    let mailBody = response["body"];
    console.log('收到请求体:', mailBody);

    await sendEmail({
      subject: "Risposta Cessione Del Quinto",
      text: mailBody,
      to: "xxxxxxxxx@gmail.com",
      from: process.env.EMAIL
    });

    res.status(200).send({ success: true, message: '邮件发送成功' });
  } catch (error) {
    console.error('接口错误:', error);
    res.status(500).send({ success: false, message: '服务器内部错误' });
  }
})

内容的提问来源于stack exchange，提问作者Ork Hossain Muntaqin