403 禁止的 CSRF 驗證失敗 React Django

Question

再會，

我一直在嘗試設置 csrftoken，這樣我的登錄就安全了。 我已經按照這個stackoverflow 問題的說明進行操作，但沒有運氣。 我通過將SESSION_COOKIE_SECURE設置為False並將CSRF_COOKIE_SECURE設置為False做了一些實驗。 我也嘗試過將標頭中的X-CSRFToken命名為csrftoken和X-CSRFTOKEN的不同類型，但它們都不起作用。 有什么建議么？

編輯：我也在隱身模式下測試它。 也許這可能是問題所在？

視圖.py

@ensure_csrf_cookie
def login_view(request):
    if request.method == "POST":
         data = json.loads(request.body)
         # Attempt to sign user in
         username = data.get("username")
         password = data.get("password")

設置.py

SESSION_COOKIE_SECURE = True

CSRF_COOKIE_SECURE=True

登錄.js

 function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                // 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 csrftoken = getCookie('csrftoken');


 fetch('/api/login', {
            credentials:'include', 
            method: 'POST',
            headers: {
                'X-CSRFToken': csrftoken,
            },
            body: JSON.stringify({
                username: username,
                password: password
               
            })
        })

 <form onSubmit={handleSubmit}>
        <CSRFToken/>
 </form>

csrftoken.js

import React from 'react';


function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        let cookies = document.cookie.split(';');
        for(let i = 0; i < cookies.length; i++) {
            var cookie = cookies[i].toString().replace(/^([\s]*)|([\s]*)$/g, "");
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}


var csrftoken = getCookie('csrftoken');

const CSRFToken = () => {
    return (
        <input type="hidden" name="csrfmiddlewaretoken" value={csrftoken} />
    );
};
export default CSRFToken;

Answer 1

好的知道了！

在 index.html (templates>frontend>index.html) 里面把這一行放在下面

<script type="text/javascript">window.CSRF_TOKEN="{{ csrf_token }}"</script>