AngularJS working with a Django CORS API

Question

AngularJS working with a Django CORS API

I have successfully implemented CORS in Django using the "django-cors" package:

https://github.com/ottoyiu/django-cors-headers

Upon following the installation instructions, I have configured the settings as follows:

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    'http://localhost:8000'
)

The Django application is running on

My frontend utilizes an Angular app that runs on "http:/localhost:8000", and I have made the necessary modifications to enable communication with the Django app.

RestangularProvider.setBaseUrl('http://localhost:3000/');

[Utilizing Restangular for resource APIs]

When attempting to make a GET API call, a pre-flight request of method "OPTIONS" is sent, resulting in the following error message:

XMLHttpRequest cannot load http://localhost:3000/users. Credentials flag is set to 'true', yet the 'Access-Control-Allow-Credentials' header is not defined. It should be 'true' in order to allow credentials. Origin 'http://localhost:8000' is thereby denied access.

After referencing the documentation, I learned that certain headers needed to be included in the request to meet server expectations. Consequently, I added the following line of code: RestangularProvider.setDefaultHeaders({"x-requested-with" : 'XMLHttpRequest'});

Despite this adjustment, another error persists without resolution: XMLHttpRequest cannot load http://localhost:3000/users. Response for preflight is invalid due to redirection.

Please note that the request/response headers are outlined below:

General:
Remote Address:127.0.0.1:3000
Request URL:http://localhost:3000/users
Request Method:OPTIONS
Status Code:301 MOVED PERMANENTLY

Response Headers
Access-Control-Allow-Headers:x-requested-with, content-type, accept, origin, authorization, x-csrftoken, user-agent, accept-encoding
Access-Control-Allow-Methods:GET, POST, PUT, PATCH, DELETE, OPTIONS
Access-Control-Allow-Origin:http://localhost:8000
Access-Control-Max-Age:86400
Content-Type:text/html; charset=utf-8
Date:Thu, 17 Dec 2015 11:10:16 GMT
Location:http://localhost:3000/users/
Server:WSGIServer/0.1 Python/2.7.10
X-Frame-Options:SAMEORIGIN

Request Headers
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, x-requested-with
Access-Control-Request-Method:GET
Cache-Control:no-cache
Connection:keep-alive
Host:localhost:3000
Origin:http://localhost:8000
Pragma:no-cache
Referer:http://localhost:8000/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36

angularjs django cors django-cors-headers

Answer 1

Answer №1

After various attempts, I successfully resolved the issue at hand. The core problem stemmed from a misstep in API naming.

Upon inspection, I discovered that my colleague had named the API incorrectly:

url(r'^users/', views.user_details)

Whenever I attempted to call "/users", the APPEND_SLASH setting in Django triggered a permanent redirect to "/users/". This behavior is outlined in the Django documentation for APPEND_SLASH:

When set to True, if the request URL doesn't match any specified patterns in the URLconf and lacks a trailing slash, an HTTP redirect will be generated with the slash appended. It's important to note that this redirection may result in loss of data submitted via a POST request.

This behavior associated with the APPEND_SLASH setting is only activated when the CommonMiddleware is included.

The most straightforward and effective solution to this dilemma was to adjust the API url by eliminating the trailing slash, like so:

url(r'^users', views.user_details)

By making this adjustment, the URL could be matched directly without triggering any redirects.

In cases where maintaining the trailing slash in the API is necessary, it is still achievable by implementing the following code in AngularJS:

resourceProvider.defaults.stripTrailingSlashes = false;
RestangularProvider.setRequestSuffix('/');

It should be noted that while the above approach is functional, it is not the recommended practice. Nevertheless, based on my experimentation, I wanted to share this insight.

Answer 2

After various attempts, I successfully resolved the issue at hand. The core problem stemmed from a misstep in API naming.

Upon inspection, I discovered that my colleague had named the API incorrectly:

url(r'^users/', views.user_details)

Whenever I attempted to call "/users", the APPEND_SLASH setting in Django triggered a permanent redirect to "/users/". This behavior is outlined in the Django documentation for APPEND_SLASH:

When set to True, if the request URL doesn't match any specified patterns in the URLconf and lacks a trailing slash, an HTTP redirect will be generated with the slash appended. It's important to note that this redirection may result in loss of data submitted via a POST request.

This behavior associated with the APPEND_SLASH setting is only activated when the CommonMiddleware is included.

The most straightforward and effective solution to this dilemma was to adjust the API url by eliminating the trailing slash, like so:

url(r'^users', views.user_details)

By making this adjustment, the URL could be matched directly without triggering any redirects.

In cases where maintaining the trailing slash in the API is necessary, it is still achievable by implementing the following code in AngularJS:

resourceProvider.defaults.stripTrailingSlashes = false;
RestangularProvider.setRequestSuffix('/');

It should be noted that while the above approach is functional, it is not the recommended practice. Nevertheless, based on my experimentation, I wanted to share this insight.

Answer 3

Answer №2

After some investigation on https://github.com/ottoyiu/django-cors-headers/blob/1e7bf86310e54cf2520c1b197d4e54bf80004df3/corsheaders/middleware.py, I discovered the ability to utilize

CORS_ALLOW_CREDENTIALS = True

within django settings.py

This action will result in setting the Access-Control-Allow-Credentials response header to True

I also noticed it's now clearly documented: https://github.com/ottoyiu/django-cors-headers

That resolution worked perfectly for me

Answer 4

After some investigation on https://github.com/ottoyiu/django-cors-headers/blob/1e7bf86310e54cf2520c1b197d4e54bf80004df3/corsheaders/middleware.py, I discovered the ability to utilize

CORS_ALLOW_CREDENTIALS = True

within django settings.py

This action will result in setting the Access-Control-Allow-Credentials response header to True

I also noticed it's now clearly documented: https://github.com/ottoyiu/django-cors-headers

That resolution worked perfectly for me

Answer 5

Answer №3

It appears that the django-cors documentation specifically mentions using only hostnames (and not full URLs) in the django settings. For example:

Sample:

    CORS_ORIGIN_WHITELIST = (
        'example.com',
        'hostname.test.com'
    )


Default:

    CORS_ORIGIN_WHITELIST = ()

You could start by trying something simple, like localhost, and see if it works. Then, you can experiment with adding the port number to see if functionality is still retained.

Answer 6

It appears that the django-cors documentation specifically mentions using only hostnames (and not full URLs) in the django settings. For example:

Sample:

    CORS_ORIGIN_WHITELIST = (
        'example.com',
        'hostname.test.com'
    )


Default:

    CORS_ORIGIN_WHITELIST = ()

You could start by trying something simple, like localhost, and see if it works. Then, you can experiment with adding the port number to see if functionality is still retained.

Answer 7

Answer №4

I encountered an issue with CORS while setting

$httpProvider.defaults.withCredentials = true;

in my Angular app. Despite trying multiple solutions, I finally found a fix that worked for me and will hopefully work for you as well.

To resolve this, simply add the following code to your Django Apache config file, which is typically located in a *.conf file like httpd.conf or apache.conf, or within a .htaccess file:

<IfModule mod_headers.c>
SetEnvIf Origin (.*) AccessControlAllowOrigin=$1
Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
Header set Access-Control-Allow-Credentials true
</IfModule>

If there is existing code, locate the directory in the file and insert the code below:

SetEnvIf Origin (.*) AccessControlAllowOrigin=$1
    Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
    Header set Access-Control-Allow-Credentials true

Additionally, make sure to update your Angular app configuration with the following changes:

angular.module('app', ['ngCookies'])
    .config([
   '$httpProvider',
   '$interpolateProvider',
   function($httpProvider, $interpolateProvider, $scope, $http) {
       $httpProvider.defaults.withCredentials = true;
       $httpProvider.defaults.xsrfCookieName = 'csrftoken';
       $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
   }]).
   run([
   '$http',
   '$cookies',
   function($http, $cookies) {
       $http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;
   }]);

Answer 8

I encountered an issue with CORS while setting

$httpProvider.defaults.withCredentials = true;

in my Angular app. Despite trying multiple solutions, I finally found a fix that worked for me and will hopefully work for you as well.

To resolve this, simply add the following code to your Django Apache config file, which is typically located in a *.conf file like httpd.conf or apache.conf, or within a .htaccess file:

<IfModule mod_headers.c>
SetEnvIf Origin (.*) AccessControlAllowOrigin=$1
Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
Header set Access-Control-Allow-Credentials true
</IfModule>

If there is existing code, locate the directory in the file and insert the code below:

SetEnvIf Origin (.*) AccessControlAllowOrigin=$1
    Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
    Header set Access-Control-Allow-Credentials true

Additionally, make sure to update your Angular app configuration with the following changes:

angular.module('app', ['ngCookies'])
    .config([
   '$httpProvider',
   '$interpolateProvider',
   function($httpProvider, $interpolateProvider, $scope, $http) {
       $httpProvider.defaults.withCredentials = true;
       $httpProvider.defaults.xsrfCookieName = 'csrftoken';
       $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
   }]).
   run([
   '$http',
   '$cookies',
   function($http, $cookies) {
       $http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;
   }]);

AngularJS working with a Django CORS API

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Digital Repeater and Angle Measurer

What should be the proper service parameter type in the constructor and where should it be sourced from?

The function process_request() was called with 2 arguments but only 1 was provided - A Tutorial on Basic HTTP Authentication Decorator

The changes to the grid options do not reflect immediately on the UI Grid interface

Tips for implementing http requests with ng-repeat and nested JSON in AngularJS

Leveraging the value service in AngularJS

refreshing a seraph or seraph model with new values

When the setDetached() function was called on an entity, it resulted in the removal of the getValidationErrors

Steps for assigning a $scope variable from within a different $scope variable

What is the best way to set the default display of the first option value in a dynamically populated <select> dropdown menu?

Can you explain the significance of the syntax "require: ^"?

I must display the output in the proper format as illustrated below

Tips for displaying lesser-known checkboxes upon clicking a button in Angular

The controller function is experiencing a reference error where a parameter is returning as undefined

Exploring the intricacies of .$on() in AngularJS

Is it possible to create a personalized serialize form when sending an AJAX POST request

Invalid preflight response (redirect) error

Exploring the interception of ajax http responses beyond the scope of AngularJS

Error callback not being invoked on save() method in AngularJS service

Guide to dynamically generating Angular watchers within a loop