angular setting custom header always wrapped inside Access-Control-Request-Headers

Question

I am trying to add some custom headers in my api request using AngularJS $http.

buildHttpConfig (url, options) {
  var config = angular.extend({
    method: 'GET',
    headers: {}
  }, options || {});

  config.headers['Content-Type'] = 'application/json; charset=UTF-8';
  config.headers['X-MyCustomHeader'] = {
    "instanceId": "abc",
    "platform": "Web",
    "appId": "efg"
  };
  config.headers.Accept = 'application/json';

  config.url = url;

  return config;
}

getDocumentsToPresent (): ng.IPromise<string> {
  var url = 'https://localhost:8080/services/xyz/myXYZ';
  var deferred = this.$q.defer();
  this.$http(this.buildHttpConfig(url, {method: 'GET'})).then(function (data: any) {
    deferred.resolve(data);
  }, function (err) {
    deferred.reject(err);
  });
  return deferred.promise;
}

Every time I make this request, the custom header automatically added to the 'Access-Control-Request-Headers'. Is there a way to add my custom headers in the global http scope? Thanks.

Why you dont use config.headers["instanceId"] = "abc" and so on to set headers? — Dmitriy
– Dmitriy, Commented Mar 7, 2016 at 20:23

KreepN · Accepted Answer · 2016-03-07 20:27:50Z

0

Yup:

app.config(function ($httpProvider) {
    $httpProvider.defaults.headers
            .common['X-Requested-With'] = 'XMLHttpRequest';
});

That's one I added to my app that gets served up with every ajax request I make. Change X-Requested-With to whatever you need.

answered Mar 7, 2016 at 20:27

KreepN

8,5981 gold badge43 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dannielum Over a year ago

actually it doesn't work, I thought it was working before but it turns out it was just some changes on server side that returns different result... I tried everything possible from what you suggested, like setting $httpProvider.defaults.headers.common['X-MyCustomHeader'] = 'XMLHttpRequest'; and $httpProvider.defaults.headers.common['X-MyCustomHeader'] = { custom: 'test' }; and also tried JSON.stringify the object but no luck. Any other suggest? Thanks!

KreepN Over a year ago

It does in fact work: encosia.com/… under Adding the header to every request automatically and stackoverflow.com/a/31425273/771928 . Not saying that your stuff isn't working, but my answer is the correct one to your question :|.

dannielum Over a year ago

sorry about that, your answer indeed solved my problem. I believe it is the server side issue. Thanks a lot!

Collectives™ on Stack Overflow

angular setting custom header always wrapped inside Access-Control-Request-Headers

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related