Reactjs 如何在 Django RESTful API 和 React 中使用 csrf_token

第一步是获取可以从Django csrftoken cookie中检索的CSRF令牌.

现在，从Django docs中，您可以了解如何使用以下简单的JavaScript函数从cookie中获取csrf令牌:

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

现在，您可以通过调用getCookie('csrftoken')函数来检索CSRF令牌

var csrftoken = getCookie('csrftoken');

接下来，通过将检索到的令牌分配给X-CSRFToken头，可以在使用fetch()发送请求时使用此csrf令牌.

  fetch(url, {
    credentials: 'include',
    method: 'POST',
    mode: 'same-origin',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'X-CSRFToken': csrftoken
    },
    body: {}
   })
  }

Rendering the CSRF Token in React Forms:

如果使用React to render forms而不是Django templates，则还需要呈现csrf令牌，因为Django标记{ % csrf_token % }在客户端不可用，因此需要创建一个更高阶的组件，使用getCookie()函数检索令牌，并以任何形式呈现.

让我们在csrftoken.js文件中添加一些行.

import React from 'react';

var csrftoken = getCookie('csrftoken');

const CSRFToken = () => {
    return (
        <input type="hidden" name="csrfmiddlewaretoken" value={csrftoken} />
    );
};
export default CSRFToken;

然后，您可以简单地导入它并在表单中调用它

import React, { Component , PropTypes} from 'react';

import CSRFToken from './csrftoken';


class aForm extends Component {
    render() {

        return (
                 <form action="/endpoint" method="post">
                        <CSRFToken />
                        <button type="submit">Send</button>
                 </form>
        );
    }
}

export default aForm;

The Django CSRF Cookie

React动态呈现组件，这就是为什么如果使用React呈现表单，Django可能无法设置CSRF令牌cookie.Django docs是这样说的:

如果视图未呈现包含csrftoken的模板

为了解决这个问题，Django提供了需要添加到视图函数中的EnsureRecSrfcookiedecorator .例如:

from django.views.decorators.csrf import ensure_csrf_cookie

@ensure_csrf_cookie
def myview(request):