I'm trying to make a POST to an api, but I'm getting a 'NetworkError 405 - Method Not Allowed' on what I've e to learn is a pre-flight OPTIONS call to the service. Researching the issue es 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="panyName" 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,
                panyName : $scopepanyName,
                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.

I'm trying to make a POST to an api, but I'm getting a 'NetworkError 405 - Method Not Allowed' on what I've e to learn is a pre-flight OPTIONS call to the service. Researching the issue es 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="panyName" 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,
                panyName : $scope.panyName,
                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.

• javascript
• angularjs
• asp-web-api

• Is this answer helpful to you in anyway? stackoverflow./questions/17498691/… – Badrinarayanan Lakshmiraghavan Commented Oct 1, 2014 at 2:05

2 Answers 2

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.

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