Неверный заголовок запроса X-CSRF-Token с использованием fetchAPI и Drupal в качестве развязанного бэкенда - PullRequest
Новая
       6

Неверный заголовок запроса X-CSRF-Token с использованием fetchAPI и Drupal в качестве развязанного бэкенда

0 голосов
/ 19 ноября 2018

Прежде всего, я начинающий разработчик.Я прошу прощения за возможные заблуждения.

Я пытаюсь создать приложение Reactjs, которое связывается с отделенным внутренним интерфейсом Drupal 8 с помощью fetchAPI.

Я хочу создать систему аутентификации, используя сеансовые куки.Получение cookie с сайта Drupal и установка его в браузере работает нормально.Я могу включить куки в HTTP-запросах.Однако, в дополнение к cookie, Drupal также хочет, чтобы в заголовок HTTP-запроса был включен «x-csrf-token».Этот токен можно получить с помощью HTTP-запроса GET к сайту Drupal.Поэтому, когда пользователь входит в систему, я запрашиваю как cookie, так и x-csrf-token и сохраняю токен в состоянии приложения React, используя Redux.

Теперь, когда я пытаюсь выполнить запрос POST, я получаю токен из хранилища Redux и включаю его в HTTP-запрос, используя заголовок X-CSRF-Token.Это дает мне ошибку 403 со следующим ответом: «Заголовок запроса X-CSRF-Token недействителен».Точно такой же запрос в сочетании с получением cookie и токена отлично работает в почтальоне, поэтому я не знаю, почему я получаю эту ошибку в браузере.

Я пробовал несколько браузеров и разные форматы для токена, но все еще не могу заставить это работать.

(Примечание: я использую веб-сервисы RESTful из ядра Drupal с включенной аутентификацией cookie).

Получение токена X-CSRF: 

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

Запрос POST:

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-заголовки

1 Ответ

0 голосов
/ 24 января 2019

Я думаю, что столкнулся с подобной проблемой, но, возможно, нет.Я искал какое-то время, и эта публикация продолжала появляться, поэтому я, хотя и добавляю ответ, просто наталкиваюсь на то, что кто-то еще наткнется на это.

Оказывается, ключ X-CSRF-Token получал несколько значений, добавленных к нему после первого вызова выборки.Например: 

 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

Несколько значений вызвали ошибку 403.Я решил эту проблему, сначала проверив, существует ли ключ.Например: 

let headerCSRF = headers.get('X-CSRF-Token'); 
if ( !headerCSRF ) {  
  options.headers.append('X-CSRF-Token', csrfToken); 
}

Не уверен, что это самое элегантное решение, но оно сработало для меня.Это связано с руководством по Drupalize.

...