Почему не отправляются данные в ajax запросе?

Написал ajax запрос для тестирования бэка. При отправке запроса передаются только заголовки. Самих данных нет. Что может работать не праивльно?

function post() {
  let system = 'dbdc5f12d59f12ef1',
    keys = ['92efa55edb5', '602923fd28d6ef7b'],
    url = host + '/system/add/',
    csrftoken = getCookie('csrftoken');

  $.ajax(url, {
    timeout: 5500,
    method: 'POST',
    headers: {
      "Content-Type": "application/json",
      "cache-control": "no-cache",
      "X-CSRFToken": csrftoken
    },
    data: {
      system: system,
      key: keys
    }
  })
    .then(function (response) {
      console.log(response);
    },
    function (error) {
      console.log(error);
    });
}

Ответы (2 шт):

Автор решения: Ein

Когда вы указываете "Content-Type": "application/json" это не означает что jQuery или браузер сами сфортируют json из тех данных что вы передали.

Если заглянуть в консоль, то вы увидете что данные отправляются не в json формате:

Так же, если бек на php, то $_POST будет пуст из-за того что указан "Content-Type": "application/json", даже если фактически данные не были в json

Такой код:

<?php

var_dump($_POST);

var_dump(file_get_contents('php://input'));

Даст такой вывод:

array(0) {
}
string(73) "system=dbdc5f12d59f12ef1&key%5B%5D=92efa55edb5&key%5B%5D=602923fd28d6ef7b"
→ Ссылка
Автор решения: Эмиль Сабитов

@Ein забыл намекнуть Вам, что вместо

  data: {
      system: system,
      key: keys
  }

необходимо вставить:

data: JSON.stringify( { "system": system, "key": keys  } )
→ Ссылка