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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用fetchAPI和Drupal作为解耦后端的无效X-CSRF-Token请求标头相关的知识,希望对你有一定的参考价值。

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

我正在尝试使用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教程有关。

以上是关于使用fetchAPI和Drupal作为解耦后端的无效X-CSRF-Token请求标头的主要内容,如果未能解决你的问题,请参考以下文章

Gatsby / Drupal8 解耦:如何在从 Drupal 文件目录中提取的 Gatsby 页面上呈现图像?

使用 MEAN.js Restful 无会话 API 后端的 Oauth 社交登录

drupal简单安装和插件安装

如何实现多后端服务和解耦架构的单点登录

使用 Next.js 和 Headless Wordpress 作为后端的 CORS 问题

有没有使用 Spring 3.0 和 Cassandra 作为后端的示例/教程? [关闭]