Question

我正忙着开发一个React Native应用程序，该应用程序与Django服务器上的GraphQL api进行通信。

在React Native中我使用React Relay尝试处理我的GraphQL请求（遵循指南here）但我的请求有403个问题。

回复说CSRF token missing or incorrect并且我试图找出使其正常工作的最佳方法。

我知道我需要首先获取CSRF cookie令牌，然后以某种方式将其与我的GraphQL Post请求一起传递，但没有太多运气。我目前的实施情况如下......

fetch('http://' + ip + ':8000/sign-in/') 
    .then((response) => {
        const cookieHeader = response.headers.map["set-cookie"]; // This gets me a cookie response with a CSRF token
        fetch('http://' + ip + ':8000/graphql', {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Cookie': cookieHeader, // Try and pass the received cookie to my POST
            'XSRF-TOKEN': cookieHeader // Trying this as well
          },
          body: JSON.stringify({
            query: operation.text,
            variables,
          }),
        }).then(response => {
          console.log('RESPONSE', response) // Currently getting a 403
          return response.json()
        })
    })

但这仍然给我一个403错误。

我似乎无法找到有关如何处理此问题的更多信息。任何人都可以告诉我哪里出错了，或者有什么建议可以解决这个问题吗？

（以下是我的API请求的快照）

Answer 1

所以设法让它与以下工作...

return getCsrfToken().then(csrfToken => {
    if (csrfToken == null) {
        console.log('CSRF NOT SET')
    }

    const url = 'http://' + ip + '/graphql'
    return fetch(url, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-CSRFToken': csrfToken
            },
            body: JSON.stringify({
                query: operation.text,
                variables,
            }),
        })
        .then(response => {
            return response.json()
        })
        .catch(error => {
            console.log('POST ERROR', error)
        })
});

function getCsrfToken() {
    var url = 'http://' + ip + '/graphql';
    return CookieManager.get(url).then(response => {
        return response.csrftoken;
    });
}

Answer 2

添加此项，因为这是我使用Relay for Django + GraphQL对CSRF进行故障排除时发现的最具体的问题

即使我发布了CSRF令牌，我也收到了类似的CSRF错误响应。我必须添加到fetch标头以匹配我的Django后端的安全设置。在这种情况下，我在浏览器中使用Relay，因此我从cookie中获取了CSRF令牌。

我已经关注了CSRF with AJAX in cookies的Django文档。由于我的安全设置，我不得不添加＆＃34;同源＆＃34;凭据。我将从中继快速入门教程

标记我需要更改的一些内容

import { get as getCookie} from 'browser-cookies'

return fetch('/graphql/', { // Added the trailing slash here 
  method: 'POST',
  credentials: "same-origin", // Added this line
  headers: {
    'Content-Type': 'application/json',
    'X-CSRFToken': getCookie('csrftoken'), // getting token from cookies
  },
  body: JSON.stringify({
    query: operation.text,
    variables,
  }),
}).then(response => {
  return response.json();
});

这就是为我解决的问题。

如何使用React Relay处理CSRF令牌

2 个答案: