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保護

回答

相關問題