Как добавить токен csrf к выборке json в js?

Каждый раз, когда я пытаюсь запустить код, я получаю ошибку, что не хватает CSRF token.

Я попробовал добавить токен в html и затем добавить слушатель событий для формы, но это не сработало, так как я все равно получил ошибку, и консоль связала ее со строкой, где я получил url.

Попытка: ({{ form }} - это форма django, которая содержит textarea)

<div id="add-form">
    <form action="" id="form-add">
        {% csrf_token %}
        <h2>New Post</h2>
        {{ form }}
        <input type="submit" value="Post" />
    </form>
</div>

// Javascript

document.querySelector('#form-add').onsubmit = submit // submit is the function with the fetch command

Вместо этого я использовал babel для добавления формы в html (это было сделано не для решения проблемы).

Я попытался вручную добавить CSRF token к форме react, но все равно получил ту же ошибку: Forbidden (CSRF token missing.): /post.

Я также пытался добавить его с помощью функции JQuery, которую я нашел здесь (документация django), но это не сработало, вероятно, потому что каждый раз, когда я добавлял CSRF token в форму, я все равно получал ошибку.

Как добавить токен csrf к команде fetch в javascript?

html:

<div id="add-form">
</div>

js:

ReactDOM.render(<Form />, document.querySelector('#add-form'));


// Apps

function Form() {
    return (
        <div>
            <form id="form-add" onSubmit={submit}>
                <input type="hidden" name="csrfmiddlewaretoken" value="uhTD3vSjaOhnEC2Bda0bgRW5rzvFMTCRnQoX2aRDP2RDHMtP2YEqhaHDQvMbb9h0" /> 
                // attempt to manually add CSRF token
                <h2>New Post</h2>
                <textarea id='content' maxLength='500' required autoComplete='off' placeholder='Share something' />
                <input type="submit" value="Post" />
            </form>
        </div>
    )
}

// Functions

function submit(event) {
    event.preventDefault();

    fetch('/post', {
        method: 'POST',
        body: JSON.stringify({
            'content': document.querySelector('#content').value
        }),
        // make sure the server knows this is a JSON body
        headers: {
            'Content-Type': 'application/json',
            // Add CSRF token

            // "X-Requested-With": "XMLHttpRequest"
        },
    })
        .then(response => response.json())
        .then(result => {
            // Print result
            console.log(result);
        }).catch(error => {
            console.log('Error:', error);
        });

    document.querySelector('#content').value = ''
}

Код в документации правильный - но, когда на вашем сайте нет тега шаблона {% csrf_token %}, он не генерируется и, следовательно, не отправляется в cookies в браузере пользователя. Возможно, вы удалили этот тег и после модифицировали свой javascript с помощью кода с сайта django.

Вы также можете попробовать использовать библиотеку Cookies.js (или использовать код из stack overflow для копирования cookies) и попробовать передать токен следующим образом:

headers: {
    'X-CSRFTOKEN': Cookies.get('csrftoken'),
}

Для подтверждения могу сказать, что я часто использую вызовы AJAX/fetch в своем коде и все работает как надо.

В вашей функции fetch после заголовков утверждений: вставьте "X-CSRFToken", см. ниже код:

function submit(event) { event.preventDefault();

fetch('/post', {
    method: 'POST',
    body: JSON.stringify({
        'content': document.querySelector('#content').value
    }),
    // make sure the server knows this is a JSON body
    headers: {
        **"X-CSRFToken": "{{csrf_token}}",**
        "Content-Type": "application/json",
        

        // "X-Requested-With": "XMLHttpRequest"
    },
})
    .then(response => response.json())
    .then(result => {
        // Print result
        console.log(result);
    }).catch(error => {
        console.log('Error:', error);
    });

document.querySelector('#content').value = ''

}

Вернуться на верх