CODEWITHSUNDEEP
javascriptangularjsasp.net-web-api
Rex_C
Rex_C

Reputation: 2477

Angularjs $http.post() call to api throwing 405 error on pre-flight OPTIONS call

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):

  <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:

<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.

Upvotes: 0

Views: 10630

Answers (2)

alfegupe
alfegupe

Reputation: 1

Use $http.jsonp(url) for api queries.

Upvotes: -1

Bobby
Bobby

Reputation: 1482

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:

  1. Add ContentType to the header, passing "application/x-www-form-urlencoded".
  2. Convert your POST data to a serialized "key1=val1&key2=val2" string.

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".

Finally, here is an interesting solution to the problem, or, there are other libraries that make some of these things easier, such as Restangular.

Upvotes: 3

Related Questions