Fetch API with Cookie


Translate

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.



All Answers
  • Translate

    Fetch does not use cookie by default. To enable cookie, do this:

    fetch(url, {
      credentials: "same-origin"
    }).then(...).catch(...);
    

  • Translate

    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) => response.json())
      .then((json) => {
        console.log('Gotcha');
      }).catch((err) => {
        console.log(err);
    });
    

    https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials


  • Translate

    Have just solved. Just two f. days of brutforce

    For me the secret was in following:

    1. I called POST /api/auth and see that cookies were successfully received.

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


  • Translate

    If you are reading this in 2019, credentials: "same-origin" is the default value.

    fetch(url).then
    

  • Translate

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