title: Asp.net Web Api and AngularJs POST / PUT trouble
body: <p>We're having problems using POST via ng-resource in Angular 1.0.5 with Yeoman scaffolding. We're running frontend on a localhost and using Azure hosted asp.net web api. We have done the CORS handling in web api, and manage to POST, but still recieve Allow-Cross-Origin error. And we can see the data in the database. This is followed by a GET error. </p>
  
  <p>So the question becomes: Would you believe this to be a frontend problem, or backend problem.
  Some code snippets for explanation:</p>
  
  <p><strong>The service</strong></p>
  
  <pre><code>angular.module('jellybeanApp.Service', ['ngResource'])
    .factory('PeopleServices', function ($http, $rootScope, $resource, $routeParams, $location) {
      return {
        users : function() {
          var ret =  $resource('http://verkvaki.azurewebsites.net/api/user/:UserId',
            {callback: 'JSON_CALLBACK'},
            {
              get: {method: 'JSONP', params: {UserId: $routeParams.UserId}},
              query: {method: 'JSONP'},
              create: {method: 'POST'}
            });
          return ret;
        }
      }
    });
  </code></pre>
  
  <p><strong>The controller</strong></p>
  
  <pre><code> 'use strict';
  
  angular.module('jellybeanApp')
    .controller('PeopleCtrl', function ($scope, PeopleServices) {
      $scope.userResult = PeopleServices.users().query();
  
    })
    .controller('EditPeopleController', function ($scope, PeopleServices, $routeParams) {
      var UserId = $routeParams.UserId;
      $scope.result = PeopleServices.users().get();
    })
    .controller('CreatePeopleCtrl', function ($scope, PeopleServices, $location) {
      $scope.newUser = {
        Username : 'Notendanafn',
        Password : 'Lykilorð',
        FirstName : 'Fornafn',
        LastName : 'Eftirnafn',
        Ssn : 'Kennitala',
        Email : 'Tölvupóstfang',
        Phone : 'Símanúmer',
        Roles : 'Stjornandi',
        JobTitle : 'Starfstitill',
        IsActive : true
      };
  
      $scope.savePeople = function (data) {
        PeopleServices.postit(data);
  
      };
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>'use strict';
      var app = angular.module('jellybeanApp', ['jellybeanApp.Service'])
        .config(function ($routeProvider, $locationProvider) {
          $locationProvider.html5Mode(true);
  
          $routeProvider
            .when('/', {
              templateUrl: 'views/main.html',
              controller: 'main'
            })
            .when('/people/new', {
              controller: 'CreatePeopleCtrl',
              templateUrl: '../views/newPeople.html'
            })
            .otherwise({
              redirectTo: '/'
            });
        });
  </code></pre>
  
  <p>After POST this happens to URL bar : <code>http://localhost:9000/people/people</code>
  where the should be only <code>http://localhost:9000/people</code></p>
  
  <p>And this error in Chrome console : <code>GET http://verkvaki.azurewebsites.net/api/user/people?callback=angular.callbacks._2 400 (Bad Request)</code> </p>
  
  <p>The route to POST in the API should only be /user, so the people attribute there surprises aswell.</p>
  
  <p>And finally, the URL to the azure hosted API : <a href="http://verkvaki.azurewebsites.net/api/user" rel="nofollow">http://verkvaki.azurewebsites.net/api/user</a></p>
  
  <p>Any thoughts?</p>