0

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.

1

2 Answers 2

3

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.

2
  • I chose this answer because you gave me the proper question to search for, which led to this page that solved my issue: scotch.io/tutorials/javascript/…
    – Rex_C
    Oct 1, 2014 at 17:30
  • Dude, you save a whole lot of my time. And if anyone's interested, in Angular 2 (typescript) you'll need to do this: let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
    – peterb
    Mar 6, 2017 at 0:15
-1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.