通过 fetch api 发送带有 ajax 请求的 cookie答案

【问题标题】：sending cookies with ajax request via fetch api通过 fetch api 发送带有 ajax 请求的 cookie
【发布时间】：2019-12-11 12:00:20
【问题描述】：

在 nodeJs 应用程序中，我通过 ajax 请求将multipart/form-data 发送到服务器。我也在使用csurf包来防范csrf攻击

问题

当我在没有 ajax 请求的情况下提交表单时，一切正常，但是当我使用 ajax 请求提交表单时，服务器上出现invalid csrf token 错误。

据我了解导致此错误的原因，是因为 cookie 未随请求一起发送。

为了发送带有 ajax 请求的 cookie，我在通过 fetch api 发出的 post 请求中设置了 credentials: 'same-origin'，但这并没有解决问题。我也尝试设置credentials: 'include'，但这没有任何区别。

问题

我的理解是否正确，这个问题是因为没有通过 ajax 请求发送 cookie，我该如何解决这个问题？

代码

let response = await fetch(requestUrl, {
      method: 'POST',
      credentials: 'include',
      headers: {
          'Content-Type': 'multiplart/form-data'
      },
      body: new URLSearchParams(form)
});

【问题讨论】：

当您检查 document.cookie 时，您是否看到了您的 csrf cookie？检查你的 devtools > application > cookies 中的 cookie，csrf 是否设置为 httponly？
@exside 我刚刚将它记录到 .控制台，但控制台上没有显示任何内容。
我认为这是你的问题，csrf cookie 需要通过document.cookie 访问才能通过请求发送它，它是否设置为仅 http？
@exside 我正在使用express-session 包进行会话管理。我检查了我的 cookie，有一个名为 connect.sid 的 cookie 由我正在使用的域设置，是的，它设置为 http-only
您是否将csurf 的cookie 选项显式设置为true？否则它不会使用 cookie……如果你这样做了，你的 cookie-parser 中间件设置正确吗？

标签： javascript node.js express csrf fetch-api

【解决方案1】：

当使用fetch()/AJAX 和csurf 时，需要将 CSRF 令牌作为请求标头传递：

// Read the CSRF token from a hidden input in the form
const token = document.querySelector('input[name="csrf-token"]').value;

// POST using the Fetch API
fetch('/<route.name>', {
  headers: {
    // pass the csrf token as a header
    'CSRF-Token': token
  },
  method: 'POST',
  body: {
    ...
  }
});

【讨论】：