Hola, estoy tratando de publicar los detalles de inicio de sesión en mi back-end usando axios, cuando lo intento en Postman funciona bien, pero cuando lo hago a través de mi front-end recibo el error 422
Estoy usando una API rápida como backend, un colega lo está construyendo, no yo
Estoy usando React como mi interfaz
aquí está mi código:
import React, { Component } from 'react'; import'./login.css'; import axios from 'axios'; class Login extends Component { constructor(props){ super(props); this.state = {username:'', password:''} this.handlechange = this.handlechange.bind(this) this.handleSubmit = this.handleSubmit.bind(this) } handlechange(e){ this.setState({[e.target.name] : e.target.value}) } handleSubmit(e){ e.preventDefault(); const data = { username: this.state.username, password: this.state.password}; axios.post('https://fastapi-aadil.herokuapp.com/login, data, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}} ) .then(res => { console.log(res); console.log(res.data) }) .catch(err => { console.log(err.response); }); } render()el error que recibo
xhr.js:210 POST https://fastapi-aadil.herokuapp.com/login 422 (Unprocessable Entity)No estoy seguro de dónde lo estoy haciendo mal. Lo intenté y cambié casi todo, pero parece que no funciona.
Gracias
No puede usar application/x-www-form-urlencoded así con axios. Vea a continuación cómo usarlo con axios.
handleSubmit(e){ e.preventDefault(); const data = new URLSearchParams() params.append('username', this.state.username) params.append('password', this.state.password) axios.post( 'https://fastapi-aadil.herokuapp.com/login', data, { headers: {'Content-Type': 'application/x-www-form-urlencoded'} } ) .then(res => { console.log(res); console.log(res.data) }) .catch(err => { console.log(err.response); }); }Como @Tobi dijo en la respuesta anterior que no puedo usar x-www-form-urlencoded , busqué en los documentos de axios cómo usarlo con reaccionar y resultó que debemos usar qs para clasificar los datos al realizar una solicitud de publicación.
y aquí está mi código, funcionó bien.
handleSubmit(e){ e.preventDefault(); const values = {'username': this.state.username, 'password':this.state.password } const data = qs.stringify(values) axios.post('https://fastapi-aadil.herokuapp.com/login', data, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}} ) .then(res => { console.log(res); console.log(res.data) }) .catch(err => { console.log(err.response); });