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

Question

I am working on a AngularJS prototype for injecting custom header for all API request in the application. I am doing a get request to an external API.

I am getting response when i request through DHC client adding custom header. If i try through Angular i am getting error.

var portal = angular.module('portal',[]);

    portal.controller('MainController', function($scope, $http) {
        $scope.pageTitle = "All Country Names";
        $http.get("https://restcountries.eu/rest/v2/all").then(function (response) {
        // $http.get("welcome.html").then(function (response) { 
            $scope.responseData = response.data;
            console.log(response.data);
        });

    });

    portal.factory('httpRequestInterceptor', function () {
      return {
        request: function (config) {

          config.headers['ServerSession'] = 'dfsdasdfasdfasdf';
          config.headers['Cookie'] = 'asdfasdfa';

          return config;
        }
      };
    });

    portal.config(function ($httpProvider) {
      $httpProvider.defaults.headers.common['Access-Control-Allow-Headers'] = '*';      
      $httpProvider.interceptors.push('httpRequestInterceptor');
    });

ServerSession and Cookie will be retrieved from service and appended to the header.

i referred link Request header field is not allowed by Access-Control-Allow-Headers with $http