2

Olá, gente!

Estou iniciando os meus estudos em Node e React-Native e tô enfrentando alguns problemas na transação de dados em método POST do front para minha API.

Tive um problema parecido com headers, mas eu consegui consertar (do nada funcionou), e esse com os dados é mais preocupante.

É o seguinte: Quando eu utilizo o axios para realizar uma request com os dados, o body do node recebe de uma forma completamente zuada o objeto eu não consigo manipulá-lo. Estou parado nesse ponto há um tempão e não sei o que fazer.

Abaixo está a função que utilizo para enviar a request:

verifyLogin = () => {
    console.log(this.state)
    axios({
        method: 'post',
        url: 'http://192.168.26.166:3000/users/authenticate',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        data: {
            username: 'teste',
            password: '123',
        },
        json: true,
    }).then((data) => {
        console.log(data)
    }).catch(error => {
        console.error(error.response)
    })
}

O objeto que chega até a API fica dessa forma:

{ '{"username":"teste","password":"123"}': '' }

E aqui é onde eu recebo o dado na rota /authenticate:

app.post('/authenticate', (req, res) => {
   console.log(3)

    knex = database(LEGACY_DATABASE)

    const { username, password } = req.body
    console.log(req.body)
    console.log(4)
})

E antes disso eu tenho o arquivo que redireciona para o arquivo de rotas, onde possui o bodyParse:

const express = require('express')
const app = express()
const routes = require('./routes/routes')
var cors = require('cors')

const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));


const PORT = 3000

app.set('x-powered-by', false)

app.listen(PORT, () => {
    console.log(`Magic happens on port ${PORT}`)
})

app.use('*', (req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*")
    res.header("Access-Control-Allow-Headers", "*")
    console.log(req)
    next()
})

app.use('/', routes)

Alguém poderia me auxiliar com o problema?

Imagem do acontecimento aqui

1 Resposta 1

0

Opa ! O axios já preenche o cabeçalho automaticamente no front-end, então você pode usar uma sintaxe mais enxuta tipo:

axios.post('http://192.168.26.166:3000/users/authenticate', data)

BACKEND: você aplicou o :

const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));

faltou o:

app.user(bodyParser.json())

Assim o Backend vai conseguir interpretar o json recebido.

2
  • Não tem nada a ver oque você colocou... quando é colocado o parametro urlencoded extended true, o bodyparser aceita outros tipos de requisições, o json já é default do mesmo não é necessário fazer bodyParser.json(), o problema está no content type dele... Assim como no header todo, só a parte do axios.post já resolve Commented 8/03/2019 às 20:19
  • Retiro o que disse sobre body{} data{} na requisição, porém aplicar o bodyParser.json() só deixará sua api mais compativél com as requisoções.
    – capaocapao
    Commented 8/03/2019 às 21:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .