动态创建的表单在 django rest 框架上总是被 403 禁止 api POST

Question

我的网站上有多个文本 post。单击编辑按钮后，我动态创建了一个表单，将 div 替换为表单元素。我在 django 端设置了 POST api 以提交此表单并编辑现有的 post。但是我的 POST 请求总是得到 403。首先我假设没有 csrf 令牌是导致问题的原因。所以我将我的 js 代码编辑为这个-

                    //form create
                    const post_content_element = post.querySelector('div .text-content');
                    const post_content = post_content_element.innerHTML;

                    let edit_form = document.createElement('form');

                    // Here I added the csrf token as a hidden input 
                    let inputElem = document.createElement('input');
                    inputElem.type = 'hidden';
                    inputElem.name = 'csrfmiddlewaretoken';
                    inputElem.value = '{{ csrf_token }}';
                    edit_form.appendChild(inputElem);

                    edit_form.setAttribute('id', 'edit-form');
                    edit_form.setAttribute('method', 'POST');

                    let text_content = document.createElement('input');
                    text_content.setAttribute('type', 'textarea');
                    text_content.setAttribute('id', 'edit-content');
                    text_content.value = post_content;

                    let submit = document.createElement('input');
                    submit.setAttribute('type', 'submit');
                    submit.setAttribute('id', 'edit-submit');

                    edit_form.appendChild(text_content);
                    edit_form.appendChild(submit);

它仍然被 403 禁止。我的 api 看起来像这样-

@api_view(['POST'])
def edit_post(request):
    if request.method == "POST":
        # do something
        return Response(status=status.HTTP_201_CREATED)

请注意，我正在使用我的用户 (AbstractUser) 模型进行身份验证。我没主意了。此问题的其他原因可能是什么？

Answer 1

我通过阅读这篇文章解决了我的问题- https://docs.djangoproject.com/en/1.11/ref/csrf/#ajax

getCookie 函数如上页所示

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 = jQuery.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;}

然后我用 X-CSRFToken header 写了 POST 请求，如下所示-

fetch(window.location.origin.concat('<url>'), {
                            method:'POST',

                            credentials: 'same-origin',
                            headers: {
                                "Content-Type": "application/json",
                                "X-CSRFToken": getCookie("csrftoken")
                            },
                           body: <whatever body you have>
                           })

动态创建的表单在 django rest 框架上总是被 403 禁止 api POST

Form created dynamically always gets 403 forbidden on a django rest framework api POST

javascript

django

csrf