Request header field Pragma is not allowed by Access-Control-Allow-Headers in preflight response

Question

I am getting this error when I was trying to keep the following code to disable cache for ajax

angularApp.config(['appConfig', '$httpProvider', function (appConfig, $httpProvider) {

if (!$httpProvider.defaults.headers.get) {
    $httpProvider.defaults.headers.get = {};
}

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

}]);

I am getting error in chrome as follows:

Request header field Pragma is not allowed by Access-Control-Allow-Headers in preflight response.

But when I remove the following code, its working fine.

$httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
$httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
$httpProvider.defaults.headers.get['Pragma'] = 'no-cache';

can any one tell me what could be the problem?

Answer 1

If you can configure in server side to accept those headers, then it's fine. Else, you should remove those header which is set in $httpProvider.defaulsts. Check the code below:

var data = {}
var httpCoonfig = {
    headers: {'Pragma': undefined, 'Cache-Control': undefined, 'X-Requested-With': undefined, 'If-Modified-Since': undefined}
};
$http.post('https://www.google.com/', data, httpCoonfig).then(function(response){
// console.log(response)
}, function(response){
     console.log(response)
});