AngularJS $ http请求在浏览器后退按钮上进行缓存

Question

Here's my code.

$scope.init = function () {
            $scope.urlParam = $location.search();
            if ($scope.urlParam.token == undefined || $scope.urlParam.id == undefined) {
                $scope.is_start = false;
                alert("您没有权限投票");
            } else {
                $http.get('/vote/validate_querystring?token=' + $scope.urlParam.token + "&id=" + $scope.urlParam.id)
                    .success(function (response) {
                        if (response.status == 3) {
                            $scope.is_start = false;
                            alert("您没有权限投票");
                        } else if (response.status == 4) {
                            $scope.is_start = false;
                            alert("您已完成投票");
                        } else {
                            $http.get('/vote/r_vote_setting')
                                .success(function (response) {
                                    if (response.status == 1) {
                                        $scope.is_start = false;
                                        alert("投票尚未开始");
                                    } else {
                                        $scope.is_start = true;
                                        $scope.voteData = response.data;
                                    }
                                });
                        }
                    })
            }
        };

I put this function in ng-init so it will be invoked every time the page is loaded.

As you can see, there are two $http.get in this function. The problem is when I hit the back button to go back to this page, $http.get('/vote/validate_querystring?token=') would be loaded from browser cache while $http.get('/vote/r_vote_setting') makes a new request to the server. I found this from chrome console.

Request URL:http://localhost:8080/vote/validate_querystring?token=202cb962ac59075b964b07152d234b70&id=1
Request Method:GET
Status Code:200 OK (from disk cache)
Remote Address:[::1]:8080
Referrer Policy:no-referrer-when-downgrade

Request URL:http://localhost:8080/vote/r_vote_setting
Request Method:GET
Status Code:200 OK
Remote Address:[::1]:8080
Referrer Policy:no-referrer-when-downgrade

I want to know why this happens and how to make them both send request to the server rather than cache when hitting back button.

Answer 1

You can use cache: false option of $http.

$http.get('/vote/validate_querystring?token=' + $scope.urlParam.token + "&id=" + $scope.urlParam.id,cache: false);

Use $httpProvider to set caching false

myModule.config(['$httpProvider', function($httpProvider) {
    //initialize get if not there
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};    
    }    

    // Answer edited to include suggestions from comments
    // because previous version of code introduced browser-related errors

    //disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
    // extra
    $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
    $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);

Answer 2

You can also include a time parameter to the call, that would every call unique, thus avoid unwanted caching for only that specific call instead having to mess with $http default settings and potentially affect every other calls on the page

 $http.get({ url: sampleUrl, method: 'GET', params: { time: new Date() } }).error(function (err) { console.log('Error encountered: ' + err); }).success(function (data) { console.log(data); });