fetch request resulting in error: Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'Window': Invalid name at HTMLInputElement.<anonymous>

Question

为什么会出现此错误？我正在尝试获取我的索引视图以编辑我的一个模型中的对象。我真的不知道以这种方式发送 CSRF 令牌我在做什么，我从网上找到的示例中复制了它，所以我不知道这是否是问题所在。代码如下：

function edit_post(post) {

    const content_div = document.getElementById(`post-body-${post.id}`);
    content_div.innerHTML = "";

    const edit_form = document.createElement('div');
    const form_input = document.createElement('input');
    form_input.setAttribute('type', 'textarea');
    form_input.setAttribute('name', 'post-body');
    text_to_edit = post.body;
    form_input.setAttribute('value', text_to_edit);
    const save_button = document.createElement('input');
    save_button.setAttribute('type', 'submit');
    save_button.setAttribute('value', 'Save');
    save_button.addEventListener('click', () => {
        const new_body = form_input.value;
        console.log(`${new_body}`);

        fetch('/', {
            method: 'PUT',
            headers: {
                'X-CSRF TOKEN': getCookie("csrftoken")
            },
            body: body = JSON.stringify({
                post_id: post.id,
                new_body: new_body,
            })
        })
        .then(response => null)
    });

    edit_form.append(form_input);
    edit_form.append(save_button);
    content_div.append(edit_form);

}
function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length == 2) return parts.pop().split(';').shift();
}

Answer 1

这可能是由于您的 header 在获取请求中引起的。

对于 X CSRF TOKEN，您必须键入 'X-CSRF-TOKEN' 而不是 'X-CSRF TOKEN'
要获取 cookie，我建议使用此功能：

function getCookie(name) {
  if (!document.cookie) {
    return null;
  }

  const xsrfCookies = document.cookie.split(';')
    .map(c => c.trim())
    .filter(c => c.startsWith(name + '='));

  if (xsrfCookies.length === 0) {
    return null;
  }
  return decodeURIComponent(xsrfCookies[0].split('=')[1]);
}

fetch request resulting in error: Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'Window': Invalid name at HTMLInputElement.<anonymous>

fetch request resulting in error: Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'Window': Invalid name at HTMLInputElement.<anonymous>

javascript

django

fetch