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

[chalisegrogan]

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?

[mislav]

You can't manipulate cookies manually in either XMLHttpRequest nor fetch(). The browser handles cookies automatically. If you want a cookie to be sent, you have to first set it by writing to document.cookie prior to making a requests.

Can't the backend read the CSRF token from the x-csrf-token header, though?

[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.

[mislav]

Yikes. Sorry I didn't spot that. Thanks for the update

[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'
})

[constantinosergiou]

hello @chalisegrogan ,
i did the same as you did here is my code
``const base = (method, url, data = {}) => { return fetch(${jwtConfig.fetchUrl}${url}`, {
method,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Cache': 'no-cache',
Authorization: localStorage.getItem("id_token") || undefined,
},
credentials: 'include',
body: JSON.stringify(data),

})
.then(response => response.json())
.then(res => res)
.catch(error => ({ error: "Server Error" }));

};
```
but i dont get any cookies
here is my screenshot

i use react for front and laravel for backend

[nick-baliesnyi]

@constantinosergiou ++ having the same problem, also using React. Help, anyone? :)

[Ferigit]

hi,
I also have this problem. When I remove credentials: 'include', then add option like Set-Cookie: 'value=value1', it works. But, I want to set just Cookie to have option Cookie in request headers not Set-Cookie: 'value=value1'(because the server works in Cookie: 'value=value1' syntax!)

appreciate any body's help.

[nick-baliesnyi]

fetch became too much of a pain for me, so I went for axios library.. after I read this article.

https://medium.com/@shahata/why-i-wont-be-using-fetch-api-in-my-apps-6900e6c6fe78?source=linkShare-a084d3e16929-1531565170
On Jul 14, 2018, 1:26 PM +0300, Faramarz Razmi [e-mail], wrote:

hi,
I also have this problem. When I remove credentials: 'include', then add option like Set-Cookie: 'value=value1', it works. But, I want to set just Cookie to have option Cookie in request headers not Set-Cookie: 'value=value1'(because the server works in Cookie: 'value=value1' syntax!)
appreciate any body's help.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.