How do I remove the default headers just for specific XHR requests in AngularJS?

Problem

99% of my ajax calls need a specific “X-API-TOKEN” to authenticate and communicate with my Rails REST API. But I’m also making a call to one thrid party API and I keep getting an error saying “Request header field X-API-TOKEN is not allowed by Access-Control-Allow-Headers.”

Everything works fine if I delte the header right before the call, and a work around would be to delete and then re-add after the call, but is there an easier way than this:

apiToken = $http.defaults.headers.common["X-API-TOKEN"]
delete $http.defaults.headers.common["X-API-TOKEN"]

$http(
method: "GET"
url: 'http://...}}'
).success((data, status, headers, config) ->
).error (data, status, headers, config) ->

$http.defaults.headers.common["X-API-TOKEN"] = apiToken

Problem courtesy of: Hawk

Solution

The $http service config object allows you to override the http header send for a specific request. See config property headers.

This can take a list of headers or a function that return a list of headers. So for the non auth header request make a copy of the default headers remove the header you dont require and then make the request. You can store this for later use.

See $http documentation

Solution courtesy of: Chandermani

View additional discussion.