Отправка CSRF-токена с PUT-запросом через fetch в javascript

    fetch("/edit_post", {
        method: "PUT",
        body: JSON.stringify({
            post_id: post_id,
            new_message: new_message,
        })
    }).then(response => {
        if (response.ok) {
            message_div.innerHTML = new_message;
        }
        else{
            message_div.firstElementChild.innerHTML = "An unexpected error occured";
        }
    })

Я получаю Forbidden (CSRF token missing.) ошибку с приведенным выше кодом, как мне отправить токен csrf в fetch?

Я вроде как не хочу включать токен csrf в html-страницу, если это возможно.

To include a CSRF token in your fetch request, you can retrieve it from a cookie. Django typically stores the CSRF token in a cookie named csrftoken. You can use JavaScript to read this cookie and include it in the headers of your fetch request.

Here's how you can do it:

    Get the CSRF Token from the Cookie: Write a function to read the csrftoken cookie.
    Include the CSRF Token in the Headers: Modify your fetch request to include the CSRF token in the headers.

Step 1: Function to Get the CSRF Token from the Cookie

    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');

Step 2: Modify Your fetch Request

Include the CSRF token in the headers of your fetch request.

    fetch("/edit_post", {
        method: "PUT",
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrftoken
        },
        body: JSON.stringify({
            post_id: post_id,
            new_message: new_message,
        })
    }).then(response => {
        if (response.ok) {
            message_div.innerHTML = new_message;
        } else {
            message_div.firstElementChild.innerHTML = "An unexpected error occurred";
        }
    });

Putting It All Together

Here's the complete code with both the function to get the CSRF token and the modified fetch request:

    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("/edit_post", {
        method: "PUT",
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrftoken
        },
        body: JSON.stringify({
            post_id: post_id,
            new_message: new_message,
        })
    }).then(response => {
        if (response.ok) {
            message_div.innerHTML = new_message;
        } else {
            message_div.firstElementChild.innerHTML = "An unexpected error occurred";
        }
    });

Putting It All Together

Here's the complete code with both the function to get the CSRF token and the modified fetch request:

    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("/edit_post", {
    method: "PUT",
    headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': csrftoken
    },
    body: JSON.stringify({
        post_id: post_id,
        new_message: new_message,
    })
}).then(response => {
    if (response.ok) {
        message_div.innerHTML = new_message;
    } else {
        message_div.firstElementChild.innerHTML = "An unexpected error occurred";
    }
});

This approach avoids including the CSRF token directly in your HTML and ensures it is securely sent with your AJAX request.
Вернуться на верх