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

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. — elithrar, Sep 29 '15 at 21:52

score 9 · Answer 1 · answered Sep 30 '15 at 11:13

9

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

answered Sep 30 '15 at 11:13

Daniel Kmak

18,164
7
66
89

What about in development? – user3476766 Sep 30 '15 at 18:14
It works in both for me. I was just saying it's solid. – Daniel Kmak Sep 30 '15 at 18:26
1

Just curios what is the below code doing? $.ajaxSetup({ xhrFields: { withCredentials: true } }); – user3476766 Sep 30 '15 at 18:30
It ensures you send HTTP-cookie with AJAX requests to server and your session etc. is working. – Daniel Kmak Sep 30 '15 at 18:55
Are your server and client in the same domain? – user3476766 Sep 30 '15 at 19:23
Yep, but it was different port that made the difference I think. – Daniel Kmak Sep 30 '15 at 20:10
2

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. – user3476766 Sep 30 '15 at 21:13

score 3 · Answer 2 · answered May 09 '18 at 11:02

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

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

2 Answers2

Linked