Fetch API with Cookie

Question

I am trying out the new Fetch API but is having trouble with Cookies  Specifically  after a successful login  there is a Cookie header in future requests  but Fetch seems to ignore that headers  and all my requests made with Fetch is unauthorized   Is it because Fetch is still not ready or Fetch does not work with Cookies   I build my app with Webpack  I also use Fetch in React Native  which does not have the same issue

User · Answer

Have just solved  Just two f  days of brutforce  For me the secret was in following    I called POST  api auth and see that cookies were successfully received  Then calling GET  api users  with credentials   include  and got 401 unauth  because of no cookies were sent with the request    The KEY is to set credentials   include  for the first  api auth call too

User · Answer

Fetch does not use cookie by default  To enable cookie  do this  fetch url      credentials   quot same-origin quot     then      catch

User · Answer

In addition to  Khanetor s answer  for those who are working with cross-origin requests  credentials   include   Sample JSON fetch request   fetch url      method   GET     credentials   include        then  response    gt  response json       then  json    gt        console log  Gotcha         catch  err    gt        console log err         https   developer mozilla org en-US docs Web API Request credentials

User · Answer

If you are reading this in 2019  credentials   same-origin  is the default value   fetch url  then

User · Answer

Just adding to the correct answers here for  net webapi2 users   If you are using cors because your client site is served from a different address as your webapi then you need to also include SupportsCredentials true on the server side configuration              Access-Control-Allow-Origin            https   docs microsoft com en-us aspnet web-api overview security enabling-cross-origin-requests-in-web-api         var cors   new EnableCorsAttribute Settings CORSSites                    cors SupportsCredentials   true          config EnableCors cors

User · Answer

This works for me   import Cookies from  universal-cookie   const cookies   new Cookies     function headers set cookie false      let headers          Accept          application json        Content-Type    application json        X-CSRF-Token      meta name  csrf-token     attr  content      if  set cookie        headers  Authorization      Bearer     cookies get  remember user token      return headers      Then build your call   export function fetchTests user id      return function  dispatch       let data         method        POST       credentials   same-origin       mode          same-origin       body         JSON stringify                        user id  user id                         headers      headers true           return fetch   api v1 tests listing    data         then response   gt  response json           then json   gt  dispatch receiveTests json

[cookies] Fetch API with Cookie

Examples related to cookies

Examples related to fetch-api