title: Angularjs $http.post() call to api throwing 405 error on pre-flight OPTIONS call
body: <p>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):</p>
  
  <pre><code>  &lt;system.webServer&gt;
  &lt;httpProtocol&gt;
    &lt;customHeaders&gt;
      &lt;add name="Access-Control-Allow-Origin" value="*" /&gt;
      &lt;add name="Access-Control-Allow-Headers" value="Content-Type" /&gt;
      &lt;add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /&gt;
    &lt;/customHeaders&gt;
  &lt;/httpProtocol&gt;
  </code></pre>
  
  <p>I have my client HTML/angular code organized as follows:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;
                  &lt;div class="col-lg-6 col-xs-12"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label&gt;First Name*&lt;/label&gt;
                          &lt;input type="text" id="txtFirstName" ng-model="firstName" class="form-control" required/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-6 col-xs-12"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label&gt;Last Name*&lt;/label&gt;
                          &lt;input type="text" id="txtLastName" ng-model="lastName" class="form-control" required/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-6 col-xs-12"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label&gt;Company Name*&lt;/label&gt;
                          &lt;input type="text" id="txtCompanyName" ng-model="companyName" class="form-control"
                                 required/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-6 col-xs-12"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label&gt;Your Work Email*&lt;/label&gt;
                          &lt;input type="email" id="txtEmail" ng-model="email" class="form-control" required/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-6 col-lg-offset-3 col-xs-12"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label&gt;Office Phone Number*&lt;/label&gt;
                          &lt;input type="text" id="txtPhone" ng-model="phone" class="form-control" required/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-6 col-lg-offset-3 col-xs-12"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;input type="submit" id="btnDemoSubmit" class="btn btn-default form-control" style="background-color: #053A54; color: #ffffff;" value="Submit For Trial" ng-click="demoInquiry()"/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>(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;
          });
      };
  });
  }());
  </code></pre>
  
  <p>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.</p>