没有 CSRF 令牌的 React Native Fetch 请求失败

Question

我一直在为使用 Rails 构建的 Web 应用程序开发移动设备补充。使用 Fetch API，我不断收到“无法验证 CSRF 令牌真实性”的通知。

export const login = (user) => {
  fetch('http://localhost:3000/api/session', {
    method: 'POST',
    credentials: 'include',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({user})
  })
  // promise handling
}

编辑：设法让它工作，但我仍然不明白为什么。如果有人有同样的问题，我就是这样解决的。我设法从我的 rails 应用程序中获取 form_authenticity_token 并将其保存为一个变量，然后我将其传递给函数。尚未测试删除凭据密钥。

export const login = (user, token) => {
  return fetch('http://localhost:3000/api/session', {
    method: 'POST',
    credentials: 'include',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ user, authenticity_token: token })
  })

Answer 1

使用 Django 后端时，您应该设置：

'X-CSRFToken': csrf_token  // not 'X-CSRF-Token' !!!

在您的 JS 请求标头中。

环境： 要在后端设置令牌，请使用：

{% csrf_token %}  <!-- put this in your html template -->

然后，在 JS 代码中获取令牌：

const csrf_token = document.getElementsByName('csrfmiddlewaretoken')[0].value;

Answer 2

您需要在标头中添加 CSRF 令牌或在跨域请求时禁用/删除 CSRF。

export const login = (user) => {
  fetch('http://localhost:3000/api/session', {
    method: 'POST',
    credentials: 'include',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'X-CSRF-TOKEN': token
    },
    body: JSON.stringify({user})
  })
  // promise handling
}