Cookie not set in Request Headers, even with 'same-origin' credentials.

Making requests to a Django API requires setting a csrftoken cookie. I am having trouble setting this and sending the Cookie header in a fetch request. I have looked at:

• https://github.com/github/fetch/issues/163#issuecomment-112180606
• https://github.com/github/fetch/issues/142
• https://github.com/github/fetch/pull/56#issuecomment-69113848
• http://stackoverflow.com/a/29664267/651952

I’ve made sure that I’m setting the credentials to 'same-origin', as noted many times in the above resources. However, the Cookie header is still missing from the request. Headers seem to be properly changed for every other attribute but Cookie. I feel like I’m missing something obvious, but cannot figure out what it is. Below is the example js I’m using.

fetch('/api/v2/user/me', {
  method: "GET",
  headers: {
    'Accept': 'application/json', // This is set on request
    'Content-Type': 'application/json', // This is set on request
    'X-CSRF-Token': 'abcdefghijklmnop', // This is set on request
    'Cache': 'no-cache', // This is set on request
    credentials: 'same-origin', // This is set on request
    'Cookie': 'csrftoken=abcdefghijklmnop' // This is missing from request
  }
})
.then(response => {
  if (response.status >= 200 && response.status < 300) {
    return response.json();
  } else {
    throw error;
  }
})
.catch(error => { console.log('request failed', error); });

You will note the header missing from the request: I tried changing the cookie key to something other than csrftoken; that did not work either. Thoughts on this?

[chalisegrogan]

@mislav I’ve figured it out. The credentials property is not supposed to be defined in the headers object. This works:

fetch('/api/v2/user/me', {
  method: "GET",
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Cache': 'no-cache'
  },
  credentials: 'include'
})

…duh. For others.

[tamitutor]

FWIW:

If you set credentials: 'same-origin' it will only send the cookies from the same domain–which is handy if 3rd party client-side libraries are adding lots of cookies and you don’t want to muddle up your server-side request with lots of useless cookie junk.

Example call:

fetch('/api/v2/user/me', {
    method: "GET",
    headers: {
        'Accept':  'application/json',
       'Content-Type': 'application/json',
       'Cache': 'no-cache'
    },
    credentials: 'same-origin'
})