使用fetchAPI和Drupal作为解耦后端的无效X-CSRF-Token请求标头

Posted 2021-05-05

首先，我是一名初级开发人员。我为可能的误解而道歉。

我正在尝试使用fetchAPI创建一个与分离的Drupal 8后端通信的Reactjs应用程序。

我想通过使用会话cookie来建立身份验证系统。从Drupal站点获取cookie并在浏览器中设置它可以正常工作。我可以在HTTP请求中包含cookie。但是，除了cookie之外，Drupal还希望将“x-csrf-token”包含在HTTP请求头中。可以通过对Drupal站点的HTTP GET请求获取此令牌。因此，当用户登录时，我同时请求cookie和x-csrf-token，并使用Redux将令牌存储在React的应用程序状态中。

现在，在我尝试发出的POST请求中，我从Redux存储中获取令牌，并使用“X-CSRF-Token”标头将其包含在HTTP请求中。这给出了403错误，其中包含以下响应：'X-CSRF-Token请求标头无效'。完全相同的请求结合获取cookie和令牌在邮递员中工作正常，所以我不知道为什么我在浏览器中收到此错误。

我为令牌尝试了多种浏览器和不同的格式，但我仍然无法使其工作。

（注意：我正在使用Drupal核心的RESTful Web服务，并启用了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 headers

答案

我想我遇到了类似的问题，但也许不是。我正在寻找一段时间，这篇文章不断出现，所以我虽然添加了一个答案，只是因为其他人偶然发现了这个问题。

事实证明，在第一次提取调用之后，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教程有关。