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

您需要在标头中添加 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
}

Answer 2

使用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;

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

2 个答案: