python - 如何在 Django RESTful API 和 React 中使用 csrf

问题描述

我以前在Django. {csrf_token}如果在Django模板中添加行，则Django处理csrf_token. 但是，当我尝试使用Django REST Framework然后开发 API 时，我被卡住了。如何添加和处理功能csrf_token，如API（后端，使用开发Django REST Framework）和React Native/React JS（前端），如 Django 模板？

标签： pythondjangoreactjsdjango-rest-framework

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

现在从Django 文档中，您可以了解如何使用这个简单的 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');

接下来，您可以在使用 fetch() 发送请求时使用此 csrf 令牌，方法是将检索到的令牌分配给 X-CSRFToken 标头。

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

以 React 形式呈现 CSRF 令牌：

如果您使用 React 来呈现表单而不是 Django 模板，您还需要呈现 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;

Django CSRF Cookie

React 动态渲染组件，这就是为什么如果您使用 React 渲染表单，Django 可能无法设置 CSRF 令牌 cookie。这就是 Django 文档的说法：

如果您的视图未呈现包含 csrftoken 模板标签的模板，则 Django 可能不会设置 CSRF 令牌 cookie。这在表单被动态添加到页面的情况下很常见。为了解决这种情况，Django 提供了一个视图装饰器来强制设置 cookie：ensurecsrf_cookie()。

为了解决这个问题，Django 提供了你需要添加到视图函数中的 ensurecsrfcookie 装饰器。例如：

from django.views.decorators.csrf import ensure_csrf_cookie

@ensure_csrf_cookie
def myview(request):

python - 如何在 Django RESTful API 和 React 中使用 csrf_token？

问题描述

解决方案

推荐阅读