$http.put 请求在 AngularJS 1.3.15 中更改为 OPTIONS 请求 [重复]答案

【问题标题】：$http.put request changing into OPTIONS request in AngularJS 1.3.15 [duplicate]$http.put 请求在 AngularJS 1.3.15 中更改为 OPTIONS 请求 [重复]
【发布时间】：2018-01-03 15:39:16
【问题描述】：

我是 AngularJS 的新手。我正在使用 AngularJS 1.3.15 版本。当我尝试使用 PUT 方法调用 api 时，它正在生成 OPTIONS 请求。我不知道我在哪里做错了。我尝试了很多 Stockoverflow 中建议的方法，但我仍然没有得到任何东西。请帮我解决这个问题。下面是我的 Controller、Models、html 文件和 Chrome 开发者工具网络活动截图。

控制器文件 users.js

'use strict';
mmlApp_users.config(['$routeProvider', function($routeProvider){
  $routeProvider
    .when('/users/update/:userId', {
      templateUrl: 'views/users/update.html',
      controller: 'update',
      resolve: {
        user: function(users, $route){
          var userId = $route.current.params.userId
          return users.getUser(userId);
        }
      }
    })
    .otherwise({
      redirectTo: '/users/index'
    });
}]);

模型文件 - users.js

'use strict';
mmlApp_users.factory('users', ['$http', '$location', '$route', function($http, $location, $route){
  var obj = {}; 

  obj.getUser = function(userId){
    return $http.get(serviceBase + 'users/view/'+userId);
  };

  obj.updateUser = function(user){
    var config = {
          headers: {
            'Content-Type': 'application/json'
          }
        };
    var userParams = {
        first_name: user.first_name, 
        last_name: user.last_name, 
        email: user.email, 
        password: user.password,
        address: user.address,
        state: user.state,
        city: user.city,
        zip_code: user.zip_code
      };
    $http.put(serviceBase + 'users/update/'+user.id+'?access-token=8e0bb9b3-b35f-4d30-943d-6028c0b85c13', userParams, config)
          .then(successHandler).catch(errorHandler);

    function successHandler(){
      $location.path('/users/index');
    }
    function errorHandler(){
      alert('Oops! Somthing went wrong.');
      //$location.path('/users/create');
    }
  };

  return obj;
}]);

视图 - update.html

<div>
  <h1>{{title}}</h1>
  <p>{{ message}}</p>
  <form role="form" name="myForm">
    <div class="row">
      <div class= "form-group col-md-6" ng-class="{error: myForm.first_name.$invalid}">
        <label> First Name: </label>
        <div>
          <input name="first_name" ng-model="user.first_name" type= "text" class= "form-control" placeholder="First Name" required/>
          <span ng-show="myForm.first_name.$dirty && myForm.first_name.$invalid" class="help-inline">First Name Required</span>
        </div>
      </div>
      <div class= "form-group col-md-6" ng-class="{error: myForm.last_name.$invalid}">
        <label> Last Name: </label>
        <div>
          <input name="last_name" ng-model="user.last_name" type= "text" class= "form-control" placeholder="Last Name" required/>
          <span ng-show="myForm.last_name.$dirty && myForm.last_name.$invalid" class="help-inline">Last Name Required</span>
        </div>
      </div>
    </div>
    ....
    ....
    ....

    <a href="#/users/index" class="btn btn-default">Cancel</a>
    <button ng-click="updateUser(user);" ng-disabled="myForm.$invalid" type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

在chrome开发者工具网络活动截图——

【问题讨论】：

这只是发送 CORS 请求的一部分。修复服务器，使其正确处理。
我可以知道为什么这个问题被否决了吗？如果有任何问题，请告诉我，我下次尝试更正。
缺乏研究。您的问题似乎没有表明您甚至知道 CORS 是什么。
虽然这是 POST 而不是 GET，但是看看这个问题：Why am I getting an OPTIONS request instead of a GET request?。
对，CORS 对哪些需要预检和哪些不需要预检有相当严格的规定。不更改 contentType 标头或以其他方式添加其他标头的 GET 和 POST 请求不需要预检。

标签： javascript angularjs yii2 angular-http

【解决方案1】：

在您的工厂试用：

(function () {
'use strict';
mmlApp_users.factory('users', ['$http', '$location', '$route','$httpParamSerializer',
function ($http, $location, $route, $httpParamSerializer) {

    var obj = {};

    obj.getUser = function (userId) {
        return $http.get(serviceBase + 'users/view/' + userId);
    };

    obj.updateUser = function (user) {

        var userParams = {
            first_name: user.first_name,
            last_name: user.last_name,
            email: user.email,
            password: user.password,
            address: user.address,
            state: user.state,
            city: user.city,
            zip_code: user.zip_code
        };

        var req = {
            method: 'PUT',
            url: serviceBase + 'users/update/' + user.id + '?access-token=8e0bb9b3-b35f-4d30-943d-6028c0b85c13',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            },
            data: $httpParamSerializer(userParams)
        };

        $http(req)
            .then(successHandler)
            .catch(errorHandler);

        function successHandler() {
            $location.path('/users/index');
        }

        function errorHandler() {
            alert('Oops! Somthing went wrong.');
            //$location.path('/users/create');
        }
    };

    return obj;

}]);

})();

还有谷歌锁 :)

【讨论】：