Using Django-Angular to make a AJAX call to a view

Question

I'm trying to use Django-Angular to make a AJAX call to a view in Django. I'm following this guide here.

However, when I make a POST I'm getting the message: CSRF verification failed. Request aborted. It seems like the action as described in the docs process_something isn't being called as I shouldn't need the token.

Can anyone spot the issue, below is what I have tried so far...

Here is the relevant js controller script:

   var in_data = {action: 'process_something', somevar: $scope.somevar};
   var post_call = CbgenRestangularDjango.all('pin-verification/').post(in_data)

and the form:

<form ng-controller="PinValidationFormCtrl"  name="CompanyValidPinForm" class="bs-callout">
        <div class="col-xs-2">
            <input class="form-control" name="somevar" ng-model="somevar" type="text">
        </div>

        <div class="col-xs-2">
            <button type="button" class="btn btn-default" ng-click="submitPin()">Verify Pin</button>
        </div>
</form>

and the view:

class VerificationView(JSONResponseMixin, View):
    # other view methods

    @allowed_action
    def process_something(self, in_data):
        # process input data
        out_data = {
            'foo': 'bar',
            'success': True,
        }
        return out_data

Answer 1

The post() method accepts a config parameter to pass the X_CSRFTOKEN header:

var config = { headers : { 'X_CSRFTOKEN' : $cookies.csrf_token }};
var in_data = {action: 'process_something', somevar: $scope.somevar};
var post_call = 
CbgenRestangularDjango.all('pin-verification/').post(in_data, config);

In your view's template the form must include the token as follows:

<form ...>
    {% csrf_token %}
    ...
</form>

Note $cookies depends on ngCookies (see http://docs.angularjs.org/api/ngCookies.$cookies)

Answer 2

You must pass the csrf token when sending a HTTP POST request.

Include {% csrf_token %} in your form or add a custom header X-CSRFToken. This should work.

Answer 3

Its most likely you are missing a header in your angular's app module config.

Try setting the following

.config(function($httpProvider) {
  $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
});

Django applications do not require this header, but if it is missing, all invocations to: request.is_ajax() would return False, even for perfectly valid Ajax requests

Found here: http://django-angular.readthedocs.org/en/latest/integration.html Also there was an api change at angular version >= 1.1.x (this header default was dropped since that version). Perhaps Django did not catch up with their documentation in every part.

---

Maybe you just need to clear your browser cache as you might have an outdated cookie sending an invalid token letting the request mapping fail.