AngularJS PUT请求报404错误，需更新API数据而非创建新数据

首先，你碰到的404错误核心原因大概率是PUT请求没有指定要更新的具体资源ID——在RESTful风格的API里，更新操作需要明确告诉后端要修改哪一条记录，而你的请求地址http://localhost:1337/Changelabel只是指向整个资源集合，后端找不到对应的单资源更新路由，所以返回404。

下面一步步帮你调整代码，实现数据更新：

1. 前端：给PUT请求带上目标记录ID #

首先你需要先获取要更新的记录ID和当前值，然后在保存时把ID拼到请求地址里：

var app = angular.module('myApp', []);
app.controller('myCntr', function($scope, $http){
  // 页面初始化时获取要更新的目标记录（示例中假设我们更新ID为1的记录，你可以根据实际场景调整ID来源）
  $http.get('http://localhost:1337/Changelabel/1').then(function(res){
    $scope.propertyvalue = res.data.name;
    $scope.property = res.data.name;
    $scope.targetRecordId = res.data.id; // 保存要更新的记录ID
  });

  $scope.save = function(){
    var updateData = { name: $scope.property };
    // PUT请求拼接目标记录ID，指向具体的单资源更新接口
    $http.put(`http://localhost:1337/Changelabel/${$scope.targetRecordId}`, updateData).then(function(res){
      $scope.propertyvalue = res.data.name;
      console.log("数据更新成功");
    }, function (err) {
      console.log("更新失败详情：", err);
    })
  }
});

2. 后端：确保有对应的PUT路由处理逻辑 #

从你的Model写法来看，应该是用Sails.js框架。默认情况下Sails会为Model自动生成RESTful路由，其中PUT /:model/:id就是用来更新单条记录的路由。如果需要自定义更新逻辑，可以在对应的Controller里补充：

// api/controllers/ChangelabelController.js
module.exports = {
  update: function(req, res) {
    Changelabel.updateOne({ id: req.param('id') })
      .set(req.body)
      .then(updatedRecord => {
        if (!updatedRecord) {
          return res.notFound('要更新的记录不存在');
        }
        return res.ok(updatedRecord);
      })
      .catch(err => res.serverError(err));
  }
};

3. 完善前端页面交互（可选） #

你的EJS页面可以保持原有结构，只需确保初始数据能正确加载显示：

<div ng-app="myApp">
  <div ng-controller="myCntr">
    <label>Items</label><br>
    <label>{{propertyvalue}}</label>
    <md-input-container>
      <input ng-model="property" ng-hide="ptext">
    </md-input-container>
    <i class="material-icons" ng-click="hidepr()" ng-hide="hideP">&#xE22B;</i>
    <i class="material-icons" ng-hide="hidePropertysave" ng-click="save()">&#xE161;</i>
    <br>
  </div>
</div>

关键注意点 #

• 确认后端服务运行在localhost:1337，且Changelabel模型已正确创建，数据库中存在要更新的目标记录；
• 可以打开浏览器控制台的Network标签，查看PUT请求的具体URL和返回信息，进一步排查404的具体原因；
• 如果碰到跨域问题，需要在后端配置CORS允许PUT请求（Sails.js可在config/cors.js中设置）。

内容的提问来源于stack exchange，提问作者Anuj Kumar Pal