reactjs/redux + django CSRF保护

我想从我的reactjs前端发出一个AJAX请求到我的django后端，但是我在POST时收到这个错误。我不知道如何正确地传递CSRF令牌围绕我的表单POST到正常工作reactjs/redux + django CSRF保护

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

我创建了一个反应成分，添加到我的形式

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()); 
      } 
     }); 
    }; 
}

来源

2016-11-06 Liondancer

你应该把下面的代码之前$就发送CSRF代码：

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

...你的代码

$.ajax({...});

你可以发现你已经设置getCookie。

这应该正常工作。

来源

2016-12-03 19:21:30

reactjs/redux + django CSRF保护

回答

相关问题