title: 415 error Web Api POST from Angular
body: <p>Spent hours battling simple POST request to a Web API controller. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>Here's the response header from Postman:
  Access-Control-Allow-Headers → Content-Type
  Access-Control-Allow-Methods → GET, POST, PUT, DELETE, OPTIONS
  Access-Control-Allow-Origin → *
  Cache-Control → no-cache
  Content-Length → 2153
  Content-Type → application/json; charset=utf-8
  Date → Wed, 04 Nov 2015 23:26:14 GMT
  Expires → -1
  Pragma → no-cache
  Server → Microsoft-IIS/10.0
  X-AspNet-Version → 4.0.30319
  X-Powered-By → ASP.NET
  X-SourceFiles → =?UTF-8?B?QzpcVXNlcnNcSnVsaWFcRG9jdW1lbnRzXFZpc3VhbCBTdHVkaW8gMjAxM1xQcm9qZWN0c1xUd2lsZHlcQVBJXGFwaVxUZXN0XHRlc3Rc?=</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried both of these POST methods with no success:</p>
  
  <ol>
  <li><p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>        [Route("api/{Test}/test")]
          [HttpPost]
          public void PostByProducts(Test t)
          {
              Console.Write(t.Name);
          }</code></pre>
  </div>
  </div>
  </p></li>
  <li><p>Update: below is replaced with the code that finally worked. Note, I added Name="PostData" which is the name of the Controller. Otherwise, was getting "null reference" error. "Data data" itself is a class in the Models.</p></li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    [ResponseType(typeof(Data))]
      [Route("api/{Test}/testpost/", Name="PostData")]
      public IHttpActionResult PostData(Data data)
      {
          int rValue = 0;
          if (!ModelState.IsValid)
          {
              return BadRequest(ModelState);
          }
          else
          {
              if (data != null)
              {
                  rValue = repo.PostTestMe(data);
              }
              else
              {
                  return BadRequest();
              }
          }
  
          return CreatedAtRoute("PostData", rValue, data);
      }</code></pre>
  </div>
  </div>
  </p>
  
  <p>On #1 my class "Test" always comes in as null, regardless of the request content-type. I tried them all in Postman, including json. Reading some of the SO answers I did add an empty constructor to the model class ("Test")</p>
  
  <p>On #2 (Old:I get null value when posted from angular) Works from angular now too with the updated code posted here. Works when I post from Postman.</p>
  
  <p>I am at my wits end. All I want to do is to post a simple form from Angular. </p>
  
  <p>Update: Now it works in Postman. I get a non-null value into the function, and get this response in Postman: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>Access-Control-Allow-Headers → Content-Type
  Access-Control-Allow-Methods → GET, POST, PUT, DELETE, OPTIONS
  Access-Control-Allow-Origin → *
  Cache-Control → no-cache
  Content-Length → 1308
  Content-Type → application/json; charset=utf-8
  Date → Thu, 05 Nov 2015 03:15:26 GMT
  Expires → -1
  Pragma → no-cache
  Server → Microsoft-IIS/10.0
  X-AspNet-Version → 4.0.30319
  X-Powered-By → ASP.NET
  X-SourceFiles → =?UTF-8?B?QzpcVXNlcnNcSnVsaWFcRG9jdW1lbnRzXFZpc3VhbCBTdHVkaW8gMjAxM1xQcm9qZWN0c1xUd2lsZHlcQVBJXGFwaVx0ZXN0cG9zdA==?=</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's what I send in Postman:
  <a href="https://i.stack.imgur.com/o5t9R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o5t9R.png" alt="enter image description here"></a></p>
  
  <p>Angular code: (formdata is straight from the html form, referenced with form.Field1, form.Field2, etc corresponding to the C# model class)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>        factory.postForm = function(formdata) {
            return $http({
              url: 'http://domain.com/api/test/testpost',
              data: JSON.stringify(formdata),
              method: 'POST',
              headers: {
                'Content-Type': 'application/json; charset=utf-8'
              }
            }).success(function(response) {
              console.log('posted ' + formdata)
            });
          }</code></pre>
  </div>
  </div>
  </p>
  
  <p>(Old: Still getting null into the API post function.) Everything works fine.</p>
  
  <p>Final update:</p>
  
  <p>In all fairness, when I uploaded my source code to the live server which lives on a shared host, and API is hosted under the same domain, just a different project, everything worked fine, and I got 201 Created OK response.</p>
  
  <p>So, it was a CORS issue, I suppose, which is interesting, because everything works fine on local host for GET requests, but POST gave me hard times.</p>
  
  <p>BTW, I ended up not using [FromBody] - it worked without it.</p>
  
  <p>Update: Ended up adding Name to the route. Everything works.</p>