javascript Angularjs $http.post() 调用 api 在飞行前 OPTIONS 调用中抛出 405 错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26129454/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs $http.post() call to api throwing 405 error on pre-flight OPTIONS call
提问by Rex_C
I'm trying to make a POST to an api, but I'm getting a 'NetworkError 405 - Method Not Allowed' on what I've come to learn is a pre-flight OPTIONS call to the service. Researching the issue comes up with answers that aren't quite what I'm looking for. I had an initial problem with CORS, to which I added the following to my web service(Web API):
我正在尝试对 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>
I have my client HTML/angular code organized as follows:
我的客户端 HTML/angular 代码组织如下：
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>
Controller:
控制器：
(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;
});
};
});
}());
I have verified that the service is working correctly with Fiddler, so I'm not sure how to tackle the issue from here. Any help would be appreciated.
我已经验证该服务与 Fiddler 一起正常工作，所以我不确定如何从这里解决这个问题。任何帮助，将不胜感激。
回答by Bobby
It sounds like your server may be expecting "application/x-www-form-urlencoded" data, while what you're actually doing is sending a JSON string in the POST body. What you will likely need to do (assuming you don't want to just have your API handle JSON) is two things:
听起来您的服务器可能需要“application/x-www-form-urlencoded”数据，而您实际做的是在 POST 正文中发送一个 JSON 字符串。您可能需要做的（假设您不想让 API 处理 JSON）有两件事：
- Add ContentType to the header, passing "application/x-www-form-urlencoded".
- Convert your POST data to a serialized "key1=val1&key2=val2" string.
- 将 ContentType 添加到标头，传递“application/x-www-form-urlencoded”。
- 将您的 POST 数据转换为序列化的“key1=val1&key2=val2”字符串。
The issue is simply that the $http service doesn't actually work in the same way that you might expect that they do with AJAX calls. You can find more about this if you do searches for variations of "angularjs $http form post".
问题很简单，$http 服务实际上并不像您期望的那样使用 AJAX 调用。如果您搜索“angularjs $http form post”的变体，您可以找到更多相关信息。
Finally, hereis an interesting solution to the problem, or, there are other libraries that make some of these things easier, such as Restangular.
最后，这是一个有趣的问题解决方案，或者，还有其他库可以使其中一些事情变得更容易，例如Restangular。
回答by alfegupe
Use $http.jsonp(url) for api queries.
使用 $http.jsonp(url) 进行 api 查询。
