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 }
});

Putsch

Does your backend explicitly set the Path attribute of the cookie? If not, it should set it to / - which encompasses both /profile and /posts. Otherwise, a cookie set on /profile will NOT be sent to /posts as it does not fall "under" that route. – Sardius

No the backend doesn't set the path attribute. – Putsch

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);
  }
})

Avenue

What about in development? – Putsch

It works in both for me. I was just saying it's solid. – Avenue

Just curios what is the below code doing? $.ajaxSetup({ xhrFields: { withCredentials: true } }); – Putsch

It ensures you send HTTP-cookie with AJAX requests to server and your session etc. is working. – Avenue

Are your server and client in the same domain? – Putsch

Yep, but it was different port that made the difference I think. – Avenue

Thanks, mine is working too in the same domain but different ports. Had to set the "Access-Control-Allow-Credentials": true for all my responses coming from server. – Putsch

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()
});

Nonagenarian