Emberjs Adding headers into ajax request

Question

I am trying to set request headers for my emberjs application. While doing the same in initializer, it does get registered and injected , but in the request headers client_id come as [object Object] This is the initializer that gets fired when application starts.

Apikey //app/initializers/apikey.js

export default {
  name: "apikey",
  initialize: function(container, application) {
    //application.deferReadiness();
    var data = {"business" : window.location.host};
    $.ajax({
      url: ENV.apiKeyEndpoint,
      type: "POST",
      dataType: "json",
      contentType: "application/json",
      data: JSON.stringify(data)
    }).done(function(results){
      console.log(results.apikey.client_secret);
      container.register("business:key", results.apikey.client_id, { instantiate: false });
      container.register("business:secret", results.apikey.client_secret, { instantiate: false });
      container.injection('controller', 'apiKey', 'business:key');
      container.injection('route', 'apiKey', 'business:key');
      container.injection('serializer', 'apiKey', 'business:key');
      container.injection('data-adapter', 'apiKey', 'business:key');
    });
  }
};

app/adapters/application.js //app/adapters/application.js

export default DS.RESTAdapter.extend({
  // ToDo:: Add headers so that the backend will get notify which client it is.
  headers: {
    'client_id': function() {
       return this.get("apiKey");
    }.property("apiKey"),
  },
  host: ENV.apiEndpoint     
});

Responses that I am getting:: request headers

//from apikey initializer

{
    "apikey": {
        "client_id": "0.0.0.0:4300",
        "client_secret": "kjahsdyau89dfuaoisduoaisu",
        "redirect_uri": "",
        "grant_types": null,
        "scope": null,
        "user_id": null
    }
}

//request headers
Accept: application / json,
text / javascript,
*
/*; q=0.01
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
client_id:[object Object]
Connection:keep-alive
Host:api.app
Origin:http://0.0.0.0:4300
Referer:http://0.0.0.0:4300/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1964.2 Safari/537.36*/

Answer 1

Ember Data does not invoke values in the headers hash if they are functions . Your client_id header is not getting called like I think you expect it to; it's just getting coerced straight into a string somewhere inside XMLHttpRequest#setRequestHeader .

You can override RESTAdapter#ajaxOptions to customize the behavior, something like:

export default DS.RESTAdapter.extend({
  customHeaders: {
    client_id: function(adapter) {
      return adapter.get('apiKey');
    }
  },

  ajaxOptions: function() {
    var adapter = this;
    var hash = this._super.apply(this, arguments);
    var headers = this.customHeaders;

    if (headers) {
      hash.beforeSend = function (xhr) {
        Ember.keys(headers).forEach(function(key) {
          var value = headers[key];

          if (Ember.typeOf(value) === 'function') {
            // Pass the adapter instance when invoking the `customHeader` functions
            value = value.call(null, adapter);
          }

          xhr.setRequestHeader(key, value);
        });
      };
    }

    return hash;
  }
});

UPDATE: The customHeader functions are now invoked with the adapter as the first argument instead of the context.