Restangular fails with promise and cross-origin requests

Question

I am reading about Restangular and everywhere is mentioned that Restangular promises and Angular works smart and the template is updating in situations like this:

As Angular supports setting promises to scope variables as soon as we get the information from the server, it will be shown in our template

$scope.something = Restagular.one('something').get();

I am trying to do the same thing but the Restangular is in a service because I want to keep my controllers clean. When I make a request to my REST API the Angular template is not updating and I receive this error:

XMLHttpRequest cannot load http://localhost:3000/api/template/1. The request was redirected to 'http://localhost:3000/api/template/1/', which is disallowed for cross-origin requests that require preflight.

Here is my code: in the service...

myAppServices.service('TemplateService', ['$http', '$cookies', '$cookieStore', Restangular',
                       function($http, $cookies, $cookieStore, Restangular) {

    Restangular.setBaseUrl(constants.serverAddress);

    var getTemplate = function(templateId) {
        // Check the input
        if (!isValidId(templateId))
            return;

        return Restangular.one('api/template', templateId).get();
    };

    // Public getters
    this.getTemplate = getTemplate;
}]);

in the controller..

$scope.currentCard =  TemplateService.getTemplate(1);

So where is the problem in this case - on the client or on the server. For my API I am using django-rest-framework but I don't have problems when I am getting list with all templates (without a specific id).

I know that I can try to return a promise from the service and from its .then() to set my scope variable but in the official repo of Restangular is mentioned this and I want to use it because the code remains clean.

Answer 1

The issue that you are having is because Django will automatically redirect urls without a slash to urls with a slash. This isn't framework specific, as I recently discovered it is an issue for ExtJS as well.

Because you are requesting the url api/templates/1 without the trailing slash and the API is being served at api/templates/1/, Django is automatically redirecting requests from one location to the other. Normally this issue an issue, you just see the redirect happening in the console and nobody cares, but CORS requires you to have permission for the url you requested, which means it can't redirect.

You can fix this two different ways: on the client side or on the server side.

---

If you want to fix this on the client side, and keep the server requiring slashes, you need to tell restangular to add a slash to the end. Restangular allows you to do this by setting

RestangularProvider.setRequestSuffix('/');

In your code, which will tell restangular to always add the trailing slash.

---

If you want to fix this on the server side, you are going to need to stop requiring slashes in your API. This has the unpleasant side effect of not allowing any requests with a slash, and may break existing applications which are working as expected. Django REST Framework allows you to do this on the router level by setting trailing_slash=False when initializing the router.

router = SimpleRouter(trailing_slash=False)

This will tell Django REST Framework to register all of the urls without a trailing slash.