Angular+Node.js+MySQL环境下PUT请求CORS异常排查

你遇到的PUT请求CORS失败问题，主要有两个核心原因，咱们逐一排查解决：

一、Angular请求参数传递错误 #

你的updateWorkOrder方法里，http.put的参数顺序搞错了！put方法的第二个参数应该是要发送的请求体数据（也就是workOrder对象），但你现在把headers配置放在了这个位置，导致既没传更新数据，headers也没正确生效。

修正后的Angular代码： #

updateWorkOrder(workOrder) {
  let headers = new HttpHeaders();
  headers.append('Content-Type', 'application/json');
  // 正确顺序：请求URL → 要更新的workOrder数据 → 请求配置（包含headers）
  return this.http.put(this.BASE_URL + '/updateworkorder/' + workOrder.id, workOrder, { headers: headers });
}

二、Node.js CORS中间件未处理OPTIONS预检请求 #

PUT属于「非简单请求」，浏览器会先发送一个OPTIONS预检请求，确认服务器允许该请求类型后才会发送真正的PUT请求。你的当前中间件只是设置了响应头，但没有对OPTIONS请求直接返回成功状态，导致预检失败触发CORS错误。

修正后的Node.js CORS中间件： #

app.use((req, res, next) => {
  // 允许任意来源的请求
  res.header("Access-Control-Allow-Origin", "*");
  // 允许的HTTP方法
  res.header("Access-Control-Allow-Methods", 'GET, POST, OPTIONS, PUT, DELETE');
  // 允许的请求头
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

  // 专门处理OPTIONS预检请求，直接返回200状态结束请求
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

额外优化建议：后端接口参数规范 #

你的后端PUT接口路径是/updateworkorder/:id，但SQL里用了req.body.id作为WHERE条件，其实更符合RESTful规范的做法是直接使用URL中的req.params.id，这样可以避免请求体和URL参数不一致的问题：

优化后的Node.js PUT接口： #

backend.put('/updateworkorder/:id', (req, res) => {
  console.log(req.body);
  let sql = "UPDATE workorders SET ? WHERE id = ?";
  db.query(
    sql,
    [
      {
        accountNumber: req.body.accountNumber,
        customerName: req.body.customerName,
        packageName: req.body.packageName,
        addons: req.body.addons,
        campaignName: req.body.campaignName,
        notes: req.body.notes,
        entryDate: new Date(req.body.entryDate),
        crew: req.body.crew,
        postDate: new Date(req.body.postDate),
        status: req.body.status
      },
      req.params.id // 使用URL路径中的id参数
    ],
    (err, result) => {
      if (err) throw err;
      res.send(result);
    }
  );
});

完成以上修改后，重新测试你的PUT请求，应该就能正常更新记录了。

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