Тело запроса, полученного на Express бэкэнд, отличается от того, как я отправил его из интерфейса React

Question

Я пытаюсь отправить запрос на публикацию из моего внешнего интерфейса React моему внешнему интерфейсу Express, по какой-то причине объект, который я хочу получить, отображается так, что объект является ключом другого объекта, и значение и пустая строка.

Вот моя функция onSubmit React

handleSubmit = event => {
    event.preventDefault()

    const backend = '/api/login'

    fetch(backend, {
        method: 'POST',
        mode: 'no-cors',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
        },
        body: JSON.stringify(this.state)
    })
        .then(res => {
            res.json()
        })
        .then(user => {
            console.log(user)
        })
        .catch(err => {
            console.log(err)
        })

}`

И моя функция публикации на express сервере

app.post("/login", (req, res) => {
    console.log(req.body)

})

Например, если объект, который я хочу отправить {username: "user1", password: "password"}, когда я console.log(req.body), я получаю { '{"username":"user1","password":"password"}': '' } в консоли.

Как это исправить, чтобы я получил объект, который я запрашивал?

Answer 1

Подход хорош с JSON.stringify(), потому что он должен быть отправлен как строка на сервер. Но если вы хотите, чтобы это был объект в бэкэнде, то вам нужно проанализировать его обратно с помощью:

const userObj = JSON.parse(req.body.Data); // it will parse it back as an object

Answer 2

Потому что это JSON формат. Для его разбора вы можете использовать: JSON.parse('{"username":"user1","password":"password"}') или JSON.parse(req.body)