Wsrtjtyk

First of all, I am a starting developer. I apologize for making possible misconceptions.

I am trying to make a Reactjs application which communicates with a decoupled Drupal 8 back-end by using fetchAPI.

I want to make an authentication system by using session cookies. Getting the cookie from the Drupal site, and setting it in the browser works fine. I can include the cookie in HTTP requests. However, in addition to the cookie, Drupal also wants a 'x-csrf-token' to be included in the HTTP request header. This token can be acquired with a HTTP GET request to the Drupal site. So when a user logs in, I request both the cookie and the x-csrf-token, and I store the token in React's application state using Redux.

Now on the POST request I am trying to make, I get the token from the Redux store and include it in the HTTP request using the 'X-CSRF-Token' header. This gives me a 403 error with the following response: 'X-CSRF-Token request header is invalid'. The exact same request in combination with getting the cookie and token works fine in postman, so I do not know why I am getting this error in the browser.

I tried multiple browsers and different formats for the token, but I still can not get this to work.

(Note: I am using RESTful webservices from Drupal core with cookie authentication enabled.)

Getting the X-CSRF-Token:

export function getCsrfToken() {

  return function(dispatch) {

    fetch("http://drupalsite.local/rest/session/token", {

      method: "GET"

    })

      .then(res => res.text())

      .catch(err => {

        console.log(err)

      })

      .then(token => {

        console.log(token);

        dispatch({

          type: FETCH_CSRF_TOKEN,

          payload: token

        });

      })

      .catch(err => {

        console.log(err);

      });

  };

}

The POST request:

export function post(name, csrfToken) {

  const data = JSON.stringify({

    title: [

      {

        value: name

      }

    ],

    type: [

      {

        target_id: "test"

      }

    ]

  });



  return function(dispatch) {

    fetch("http://drupalsite.local/node", {

      method: "POST",

      credentials: "include",

      headers: new Headers({

        "Content-Type": "application/json",

        Accept: "application/json",

        "X-CSRF-TOKEN": csrfToken

      }),

      body: data

    })

      .then(res => {

        dispatch({

          type: POST_DATA_CORE_REST,

          payload: res

        });

      })

      .catch(err => {

        console.log(err);

      });

  };

}

HTTP headers

I think I ran into a similar issue, but maybe not. I was searching for for awhile and this post kept coming up so I though I add an answer just incase anyone else stumbles on this.

It turns out that the X-CSRF-Token key was getting multiple values appended to it after the first fetch call. For example:

 1. x-csrf-token: wisHtEWaMVIXMe87Rxm5-aTI_M-FdR_pbE4XBZB50cY

 2. x-csrf-token: wisHtEWaMVIXMe87Rxm5-aTI_M-FdR_pbE4XBZB50cY, wisHtEWaMVIXMe87Rxm5-aTI_M-FdR_pbE4XBZB50cY

 3. x-csrf-token: wisHtEWaMVIXMe87Rxm5-aTI_M-FdR_pbE4XBZB50cY, wisHtEWaMVIXMe87Rxm5-aTI_M-FdR_pbE4XBZB50cY, wisHtEWaMVIXMe87Rxm5-aTI_M-FdR_pbE4XBZB50cY

The multiple values triggered the 403 error. I resolved this problem by first checking if the key existed. For example:

let headerCSRF = headers.get('X-CSRF-Token'); 

if ( !headerCSRF ) {  

  options.headers.append('X-CSRF-Token', csrfToken); 

}

Not sure if this is the most elegant solution but it worked for me. This is related to the tutorial on Drupalize.