ember-cli-mirage response headers are missing from XHR object

Question

Trying to understand the inconsistency in the response between using my api vs ember-cli-mirage.

I have a handler waiting for a response for a POST request to authenticate a user. The expected parameters for the handler are response, status and xhr:

(e.g. .then(function(response, status, xhr) {...}).

Using my API I receive what I'd expect- response is the data, status is the statusText and xhr is the xhr object. However using ember-cli-mirage everything comes under response (kind of), and status and xhr are both undefined.

Snippets of my code are below:

mirage/config.js

this.post(URI.AUTH_SIGN_IN, function(db, request) {
  const responseHeaders = {
    'access-token': 'abcxyz123',
    'client': 'foobarbaz',
    'token-type': 'Bearer',
    'expiry': '1497364419',
    'uid': '[email protected]'
  };

  const user = {
    data: { id: 1, type: 'user', attributes: { uid: '[email protected]', email: '[email protected]', name: 'John Doe', provider: 'email' } }
  };

  return new Mirage.Response( 200, responseHeaders, user );
});

authenticators/devise.js

authenticate(identification, password) {
  ...
  this.makeRequest( credentials ).then(function(response, status, xhr) {
    // persists the five headers needed to send to devise-token-auth
    // with mirage; response = Response {type: "default", status: 200, ok: true, statusText: "OK", headers: Headers…}, status = undefined, xhr = undefined
    // with actual api; response = Object {data: Object}, status = "success", xhr = Object {readyState: 4, getResponseHeader: function, getAllResponseHeaders: function…}

    // As a result below will fail :( 
    // TypeError: Cannot read property 'getResponseHeader' of undefined
    var result = {
        'access-token': xhr.getResponseHeader( 'access-token' ),
        expiry:         xhr.getResponseHeader( 'expiry' ),
        tokenType:      xhr.getResponseHeader( 'token-type' ),
        uid:            xhr.getResponseHeader( 'uid' ),
        client:         xhr.getResponseHeader( 'client' )
      };
   });
}

I believe I'm doing it all correctly, but I've been known to be wrong :). Any help is much appreciated.

Answer 1

Hm, I'm not sure why makeRequest is returning undefined for the second and third params.

I made a simple Twiddle and the args seem correct for getJSON:

https://ember-twiddle.com/70229e352f37b4e437ced8509a4415d9?openFiles=routes.application.js%2C

model() {
  return Ember.$.getJSON('/foo').then((data, response, object) => {
    return object.getAllResponseHeaders();
  });
}

There may be something slightly different with how Pretender handles the mocked response or iwth how makeRequest works, so I'd suggest to start by looking there.