How do I get cookies to to be sent with my requests to the backend in ember app?

Question

Is there a way in Ember to send cookies with the requests to the backend?

For example: if my client URL is protocol://example.com. The cookies that belong to the same domain will be in the request header when I navigate to protocol://example.com/profile. However, they do not persist in the subsequent request/s the profile route model method makes -> example to protocol://example-host/posts. How do I make those cookies persist?

/app/routes/profile.js:

import Ember from "ember";
import AuthenticatedRouteMixin from "simple-auth/mixins/authenticated-route-mixin";

export default Ember.Route.extend({
  model() {
    return this.store.findAll("post");
  },

  renderTemplate() {
    this.render("header", {
      outlet: "header"
    });

    this.render("profile");
  }
});

/app/adapters/application:

import Ember from "ember";
import DS from "ember-data";

export default DS.RESTAdapter.extend({
  host: 'http://example-host.com',
  corsWithCredentials: true,
  crossDomain: true,
  xhrFields: { withCredentials: true }
});

Answer 1

This works in my production app. Code in app/adapters/application.js:

import Ember from 'ember';

$.ajaxSetup({
  xhrFields: {
    withCredentials: true
  }
});

export default DS.RESTAdapter.extend({
  ajax(url, method, hash) {
    hash = hash || {};
    hash.crossDomain = true;
    hash.xhrFields = {
      withCredentials: true
    };
    return this._super(url, method, hash);
  }
})

Answer 2

You can also set individual header values to be sent with each ember-data request. Useful if you need to pass an API key with all your requests.

In your adapter (app/adapters/application.js):

import DS from 'ember-data';
import { get } from '@ember/object';
import { computed } from '@ember/object';

export default DS.RESTAdapter.extend({
  headers: computed(function() {
    return {
      'API_KEY': get(document.cookie.match(/apiKey\=([^;]*)/), '1'),
      'ANOTHER_HEADER': 'Some header value'
    };
  }).volatile()
});