AngularJs + Django RESTful: session based authentication

Question

I'm developing an angular web application that will replace the current website that we have. The current website uses session based authentication. At the moment, I can't access the hosted API with get or post requests.

I'm developing the angular application on my local computer using a python simple server, whereas the api is hosted online.

I would prefer to find a fix that's completely in angular since I can't change the API without help (it was written by my boss a while ago, and is now used in the production version). I don't have a login page so I'm just trying to provide the authentication information in my headers and requests.

My angular application was written independent of django. I just want to access the django backend

So far I'm trying the following to set the headers:

app.config(['$httpProvider', function($httpProvider) {
  $httpProvider.defaults.xsrfCookieName = 'csrftoken';
  $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
  $httpProvider.defaults.headers.common = {'username': btoa('myUsername'), 'password': btoa('myPassword')
};
}]);

And in my service:

app.factory('Test', ['$resource', function($resource) {
  return $resource('https://www.phonywebsite.org/en/api/test/')
};

I consistently get 301, 400 and 403 errors. Lately it's been mostly 301 errors and I get no response from the api. I'm using the Allow CORS chrome extension as a temporary fix to try to get to the api without getting a CORS policy error.

My questions

1. How can I fix the CORS errors without using the chrome extension?

2. How do I provide my authentication to my django backend that uses session based authentication making sure the csrf cookie its looking for is in the header?

Answer 1

To answer your first question, using the cors extension is a temporary solution and should mostly never be used cause your clients might not use it. To handle CORS, you need to understand how cross site API calls work. In short CORS is a mechanism that allows AJAX requests to circumvent their same origin limits. To handle such situations you need to update your backend and add

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

. Once you add this your settings.py should stop getting CORS issues.

To answer your second question, angular already provides you with support for CSRF so half of your battle is already won. What you need to do is add a patch on your module to start accepting csrf tokens (The name is a bit different in angular). You have already done this and done a good job of it as well:

var app = angular.module('app', ['...']);

app.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.xsrfCookieName = 'csrftoken';
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
}]);

What this would do is make sure that whenever you make a $http call your csrf token is set as well.

As a learning oppurtunity, you could also try using ng-cookies as well. To go further to explain this, whenever you make a call in angular , your request in bundled with cookies as well so you can easily access them in request.COOKIES.

You need to change how you are calling your API as well, something like:

app.factory('APIService', function ($http) {
  return $http({url: 'https://www.phonywebsite.org/en/api/test/',
                method: 'GET'})
}

You can obviously make modifications to this but I think this shows the $http usage to make you understand the general gist.

You can try to add some more authentication around your application here as well (or replace django auth with your own custom auth), but that is on your use case.

Hope this helps.