"GET"ting AngularJS resource in MSIE 9 returns empty array

Question

Problem

When using the GET request from a $resource, the response on success is an empty array in Microsoft Internet Explorer 9 only.

Tests

Scenarios of Success:

• Using FF or Chrome, the GET request returns an array of data in both development and local environments.
• IE9 accessing a local server, the "GET" request returns an array of data.

Scenario of failure:

• IE9 accessing the development server, an empty array is returned.

Debugging steps:

• In IE9 accessing the development server:
  • typing in the URL to the REST API will successfully return an array of data. ✓
  • stepping through the debugger verifies that the data sent to the server are numbers and of the correct value. ✓
  • POSTing data to another $resource works fine - data is persisted in the database and is correct. ✓
  • stepping through the debugger shows an empty array in the success method. ✗

Results

• REST API is working since a direct request returns data
• Angular should be working, since results are returned in FF and Chrome

Questions

• Is there any other tips to debug this issue?
• What could be the cause of this?
• Is there any IE9 specific issues with Ajax requests?

Possible Related Resources

• AngularJS 1.2.0 $resource response is empty - in my case, I get a response, it's just an empty array
• AngularJS factory http returns empty - current issue is IE9 only

Code

Resource

var AnswerSetBySubjectByForm = function($resource) {
    return $resource('/rest/answerset/subject/:idSubject/form/:idForm',
            { idSubject : '@idSubject', idForm : '@idForm'},
            {'get' : {method:'GET', isArray:true}}
        );
};

Controller

var AnswerSetController = function($scope, AnswerSetBySubjectByForm) {

...

  $scope.$on('loadAnswerSets', function(e, idSubject, idForm) {
    if (angular.isNumber(idSubject) && angular.isNumber(idForm)) {
      AnswerSetBySubjectByForm.get({ 
        idSubject : idSubject, 
        idForm : idForm
      }, function(answerSets) {
        /* answerSets is an empty array in IE9 only */
        $scope.answerSets = angular.copy(answerSets);
      });
    }
  });

...

Application

...

app                
  .factory('AnswerSetBySubjectByForm', 
        ['$resource', AnswerSetBySubjectByForm])
  .controller('AnswerSetController', 
        ['$scope', 'AnswerSetBySubjectByForm', AnswerSetController])

...

Any help in debugging this would be greatly appreciated! Thanks in advance.

Answer 1

Do this in your angular code to prevent GET requests being cached

app.config(['$httpProvider', function ($httpProvider) {
    //Disable caching and make sure the call is made for each GET request.
    //Especially for IE, disable ajax get request caching
    $httpProvider.defaults.headers.get = $httpProvider.defaults.headers.get || {};
    $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
    $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);