我以前有的经验Django。如果{csrf_token}在Django模板中添加行,则Django处理的功能csrf_token。但是,当我尝试使用开发API时,Django REST Framework就会陷入困境。如何添加和处理Django模板(csrf_token在中API,使用后端开发Django REST Framework)和React Native/React JS(前端)中的功能?
Django
{csrf_token}
csrf_token
Django REST Framework
API
React Native/React JS
第一步是获取CSRF令牌,该令牌可以从Django csrftoken cookie中检索。
现在,从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令牌
getCookie('csrftoken')
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: {} }) }
以React形式呈现CSRF令牌:
如果您使用React来呈现表单而不是Django模板,则还需要呈现csrf令牌,因为Django标签{ % csrf_token % }在客户端不可用,因此您需要创建一个更高阶的组件来使用该getCookie()函数检索令牌并呈现它任何形式。
{ % csrf_token % }
getCookie()
让我们在csrftoken.js文件中添加一些行。
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 template标签的模板,则Django可能未设置CSRF令牌cookie。在将表单动态添加到页面的情况下,这很常见。为了解决这种情况,Django提供了一个视图装饰器来强制设置cookie:surecsrf_cookie()。
为了解决这个问题,Django提供了需要添加到view函数中的surecsrfcookie装饰器。例如:
from django.views.decorators.csrf import ensure_csrf_cookie @ensure_csrf_cookie def myview(request):