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

Question

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

Answer 1

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

Answer 2

Set the desire header/headers to undefined like this, then it will not affect the global settings.

$http( {
         method: 'GET',
         url: 'someurl',
         headers: {
           'X-API-TOKEN': undefined
         }
       }
     )