Question

我试图对api进行POST，但我得到了一个＆＃39; NetworkError 405 - Method Not Allowed＆＃39;我所学到的是对该服务的飞行前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）是两件事：

将ContentType添加到标题中，传递“application / x-www-form-urlencoded”。
将您的POST数据转换为序列化的“key1 = val1＆amp; key2 = val2”字符串。

问题很简单，$ http服务的实际工作方式与您对AJAX调用的预期方式不同。如果您搜索“angularjs $ http form post”的变体，您可以找到更多相关信息。

最后，here是解决问题的一个有趣的解决方案，或者，还有其他库使这些事情变得更容易，例如Restangular。

Answer 2

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

Angularjs $ http.post（）调用api在飞行前OPTIONS调用时抛出405错误

2 个答案: