对api的Angularjs$http.post()调用在飞行前OPTIONS调用中引发405错误

Question

我正试图对一个api进行POST，但我收到了一个"NetworkError 405-Method Not Allowed"，我了解到这是对该服务的飞行前OPTIONS调用。研究这个问题得到的答案并不是我想要的。我在CORS方面遇到了一个最初的问题，为此我在web服务（web API）中添加了以下内容：

  <system.webServer>
<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
  </customHeaders>
</httpProtocol>

我有我的客户端HTML/角度代码组织如下：

HTML:

<div class="row">
                <div class="col-lg-6 col-xs-12">
                    <div class="form-group">
                        <label>First Name*</label>
                        <input type="text" id="txtFirstName" ng-model="firstName" class="form-control" required/>
                    </div>
                </div>
                <div class="col-lg-6 col-xs-12">
                    <div class="form-group">
                        <label>Last Name*</label>
                        <input type="text" id="txtLastName" ng-model="lastName" class="form-control" required/>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-xs-12">
                    <div class="form-group">
                        <label>Company Name*</label>
                        <input type="text" id="txtCompanyName" ng-model="companyName" class="form-control"
                               required/>
                    </div>
                </div>
                <div class="col-lg-6 col-xs-12">
                    <div class="form-group">
                        <label>Your Work Email*</label>
                        <input type="email" id="txtEmail" ng-model="email" class="form-control" required/>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-lg-offset-3 col-xs-12">
                    <div class="form-group">
                        <label>Office Phone Number*</label>
                        <input type="text" id="txtPhone" ng-model="phone" class="form-control" required/>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-lg-offset-3 col-xs-12">
                    <div class="form-group">
                        <input type="submit" id="btnDemoSubmit" class="btn btn-default form-control" style="background-color: #053A54; color: #ffffff;" value="Submit For Trial" ng-click="demoInquiry()"/>
                    </div>
                </div>
            </div>

控制器：

(function () {
var app = angular.module("app", [])
app.controller('MainController', function($scope, $http) {
    var onUpdatesComplete = function (response) {
        $scope.updates = response.data;
    };
    $http.get("http://localhost:XXXXX/XXX/XXXXXX/XXXXXXXXXX")
        .then(onUpdatesComplete);
$scope.demoInquiry = function(){
        var data = {
                firstName : $scope.firstName,
                lastName : $scope.lastName,
                companyName : $scope.companyName,
                email : $scope.email,
                phone : $scope.phone
        };
        console.log(data);
        $http.post("http://localhost:XXXXX/XXX/XXXXXX/XXXXXXXXXX", data).success(function() {
            $scope.postSuccess = true
        }).error(function(){
            $scope.postError = true;
        });
    };
});
}());

我已经验证了Fiddler的服务是否正常工作，所以我不确定如何从这里解决这个问题。如有任何帮助，我们将不胜感激。

Answer 1

听起来您的服务器可能正在等待"application/x-www-form-urlencoded"数据，而您实际要做的是在POST正文中发送一个JSON字符串。您可能需要做的是两件事（假设您不想让API处理JSON）：

1. 将ContentType添加到标头中，传递"application/x-www-form-urlencoded"
2. 将POST数据转换为序列化的"key1=val1&key2=val2"字符串

问题很简单，$http服务的工作方式与您可能期望的AJAX调用的工作方式不同。如果你搜索"angularjs$http表单post"的变体，你可以找到更多关于这方面的信息。

最后，这里有一个有趣的问题解决方案，或者说，还有其他库可以让这些事情变得更容易，比如Restangular。

Answer 2

使用$http.jsonp（url）进行api查询。