Невозможно отправить действительный запрос с помощью React (он работает с curl)

Question

Я пытаюсь подключиться к моему маленькому серверу, созданному с помощью aiohttp. Это почтовый запрос, вот как он выглядит, используя HTTP ie (он работает и с curl): Итак, вот что я попробовал с реагировать:

    const requestOptions = {
      method: 'POST',
      body: encodeURIComponent('username=thomas&password=yolo'),
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Accept': 'application/json'
      }
    };
    fetch("http://localhost:8080/login", requestOptions)
        .then(response => response.json())
        .then(data => console.log("data:" + data))

Но этот запрос не не работает: я получаю эту ошибку на стороне сервера: «ожидаемые поля имени пользователя и пароля» (основной файл сервера sr c: https://hasteb.in/amucojas.py). Вот экран моего браузера:

Как вы можете видеть на этом скриншоте, отправленный запрос содержит «:» в конце. Как вы думаете, это может быть проблемой? Я сделал что-то неправильно? На какой стороне?

РЕДАКТИРОВАТЬ: также пытался отправить тот же запрос с этими параметрами:

    const requestOptions = {
      method: 'POST',
      body: JSON.stringify({ "username" : "thomas", "password" : "yolo"}),
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      }
    };

Это выглядит немного лучше в браузере, но сервер возвращает мне ту же ошибку. Вот результат curl -v:

Answer 1

Вот первое решение, которое я нашел на этом сайте. Вероятно, это не лучший вариант, поскольку он был разработан для реагирования на нативном языке, но в настоящее время это работает для меня:

    var details = {
      'username': 'thomas',
      'password': 'yolo'
    };

    var formBody = [];
    for (var property in details) {
      var encodedKey = encodeURIComponent(property);
      var encodedValue = encodeURIComponent(details[property]);
      formBody.push(encodedKey + "=" + encodedValue);
    }
    formBody = formBody.join("&");

    fetch('http://localhost:8080/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
      },
      body: formBody
    })
      .then(response => response.json())
      .then(response => console.log(response));

Я пытался использовать URLSearchParams, но он не работал.

Answer 2

Попробуйте

const user = {
    username: 'thomas',
    password: 'yolo'
};

const requestOptions = {
    method: 'POST',
    body: JSON.stringify(user),
    headers: {
        'Content-Type': 'application/json'
    }
}

fetch('http://localhost:8080/login', requestOptions)
    .then(response => response.json())
    .then(response => console.log(response));