Asp.net Web Api and AngularJs POST / PUT trouble

Question

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.

So the question becomes: Would you believe this to be a frontend problem, or backend problem. Some code snippets for explanation:

The service

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;
      }
    }
  });

The controller

 '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);

    };

app.js

'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: '/'
          });
      });

After POST this happens to URL bar : http://localhost:9000/people/people where the should be only http://localhost:9000/people

And this error in Chrome console : GET http://verkvaki.azurewebsites.net/api/user/people?callback=angular.callbacks._2 400 (Bad Request)

The route to POST in the API should only be /user, so the people attribute there surprises aswell.

And finally, the URL to the azure hosted API : http://verkvaki.azurewebsites.net/api/user

Any thoughts?

Just a suggestion, when you use a $resource, it returns a promise which you need to handle like this: `PeopleServices.users().query().then(function(result){ $scope.users = result.data; }, function() { /*error*/ });` — jpmorin, Apr 15 '13 at 06:53
As for your problem, I suggest that you have a look at this post (http://stackoverflow.com/a/13329581/1036025). It says that Angular changes the name of the JSONP callback, and that your server may not handle it. — jpmorin, Apr 15 '13 at 07:00
@jpmorin thanks for your reply. The promise thing doesn't work. Returns this : Object [object Array] has no method 'then'. — bibz, Apr 15 '13 at 10:50
this shit drove me crazy to such an extent that I just dev on chrome with --disable-web-security — Quibblesome, Oct 04 '13 at 18:56

score 0 · Accepted Answer · answered Oct 27 '14 at 09:25

Long time since solved. Turned out we were using a CorsHandler in code, manipulating the XHR scripting, as well as using web.config to allow cross-origin-requests. So while doing [POST] the config allowed it, but the handler got confused. Solved at the time with removing CorsHandler and only using

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
  </customHeaders>
</httpProtocol>

in the portion of web.config.

Now of course with web api 2 you just use Microsoft.AspNet.WebApi.Cors.

Asp.net Web Api and AngularJs POST / PUT trouble

1 Answers1