0

I'd like to fetch data from a webservice, which is done by:

$scope.data = itemsApi.search(null, $scope.filterCriteria);

The itemsApi is defined like this:

angular.module('rootApp')

.factory('itemsApi ', function($resource, rootURL) {
    return $resource(rootURL + '/items/:id/:action/:correlationUid', {
        id : '@itemIdentification'
    },

    search : {
        method : 'POST',
        isArray : false
    }
 });
});

Normally, this works fine. The data gets fetched and my Angular application finishes off the webpage by displaying the data.

However, I now have security measures in place which will redirect the user to a SSO login page if the user is not logged in or his session has expired. This means that it's possible to retrieve a 303 status code on the API call, and a webpage (html, 200) gets returned. The $scope.data now contains HTML instead of JSON because of the browser handling the redirect, and a Javascript error occurs, probably preventing the browser from continuing to follow the redirect:

"Error: [$resource:badcfg] Error in resource configuration. Expected response to contain an array but got an object http://errors.angularjs.org/1.2.32/$resource/badcfg?p0=array&p1=object ...

I've tried creating an Interceptor on the response, finding out if I retrieve HTML pages instead of JSON and act upon that, but I find it a dirty solution and I'm guessing it will give rise to problems when the project is in a further state.

How can I configure the application so redirects on http requests are followed instead of (attempting to) parsed to JSON?

Joetjah
  • 6,292
  • 8
  • 55
  • 90
  • I've run into this problem as well, the way I resolved it (I'm using C# MVC) was to create a custom authorization attribute to return 403 instead of the redirection, that way the ajax call would simply return an error, as like you I felt doing something on the client side would be dirty. – George Mar 20 '17 at 13:10
  • The way you are doing with interceptors is actually the ideal way to do. See this [handle redirects](http://stackoverflow.com/a/29620184/3543808) – Gangadhar Jannu Mar 20 '17 at 13:31
  • 1
    @GangadharJannu Well, my application is quite large so I'm never sure which part the user clicked on. Besides that, I'm working with partial html files, so when I redirect the user back to the location requested, I get messy layout. However, I could use the $window.location.reload(); and ignore the errors about the response content for now. But I was hoping for a better solution though. Thank you for thinking with me! – Joetjah Mar 20 '17 at 13:41
  • @Joetjah You could track the response status to check if it is 303 instead of checking for the response type – Gangadhar Jannu Mar 20 '17 at 13:44
  • @GangadharJannu The browser handles the 303 and returns the html page the redirection points to. So the 'response' object in Javascript does not contain a property 'response.status', like a normal JSON object, but it's plain HTML. That's why it's a problem in the first place, the Javascript code expects JSON. – Joetjah Mar 20 '17 at 13:50
  • Yup. So there is only one way that is checking the response type! :( – Gangadhar Jannu Mar 20 '17 at 13:54

0 Answers0