reactjs/redux + django CSRF protection

Question

我正试图从我的reactjs前端到我的django后端发出AJAX请求，但我在POST上得到此错误。我不确定如何正确地传递CSRF令牌让我的表单POST正常工作

Forbidden (CSRF token missing or incorrect.): /api/contact
[05/Nov/2016 03:43:14] "POST /api/contact HTTP/1.1" 403 2502

我创建了一个react组件并将其添加到我的表单

CSRF组件

import React from 'react';
import $ from 'jquery';
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 = $.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
const Csrf = () => {
    let csrfToken = getCookie('csrftoken');
    return (
        <input type="hidden" name="csrfmiddlewaretoken" value={ csrfToken } />
    );
};
export default Csrf;

联系人表单组件:

const ContactForm = ({ formOnChange, onFormSubmit, isFullNameValid, isEmailValid, isMsgValid }) => {
    let rows = 10;
    let tabindex = 8;
    let isSubmitDisabled = !(isFullNameValid && isEmailValid && isMsgValid);
    return(
        <div className="form-wrapper">
            <form className="contact-form" onChange={ formOnChange }>
                <Csrf />
                <input className={ isFullNameValid ? "" : "active" } type="text" name="fullname" placeholder="Full Name *"  />
                <div className="email-phone-group">
                    <input type="text" name="phonenumber" placeholder="Phone Number"/>
                    <input className={ isEmailValid ? "" : "active" } type="text" name="email" placeholder="Email *"/>
                </div>
                <textarea className={ isMsgValid ? "" : "active" } rows={ rows } tabIndex={ tabindex } name="message" placeholder="Message... *"/>
                <button disabled={ isSubmitDisabled } className="contact-form-submit-btn" type="button" onClick={ onFormSubmit }>Submit</button>
            </form>
        </div>
    );
};

我的redux操作调用这个AJAX函数

export function contactSubmission(contactSubmission) {
    // thunk
    return dispatch => {
        console.log("contact form submitted");
        console.log(contactSubmission);
        $.ajax({
            method: 'POST',
            url: '/api/contact',
            dataType: 'json',
            success: payload => {
                if (payload.error) {
                    return dispatch(contactSubmissionFailure());
                } else {
                    return dispatch(contactSubmissionSuccess(payload));
                }
            },
            error: payload => {
                console.log("ajax error");
                console.log(payload);
                return dispatch(contactSubmissionFailure());
            }
        });
    };
}

Answer 1

应该将以下代码放在$之前。ajax发送CSRF代码:

$.ajaxSetup({
                headers: {"X-CSRFToken": getCookie("csrftoken")}
            });

…然后你的代码

$.ajax({...});

你可以注意到你已经设置了getCookie。