He escrito una aplicación de tareas sencillas con reacción que actúa como una interfaz y un matraz que maneja CRUD desde una base de datos. La aplicación usa axios para manejar las solicitudes; GET se completa bien, sin embargo, cuando intenta POST JSON, la API del matraz devuelve un error 400. Aquí hay un código de muestra condensado.

Función JS POST.

 function testPost(){ axios.post('http://'+window.location.hostname+':8000/todo/', { title: "test123", }).then(res => { console.log(res) }).catch(err => { console.log(err) }) }

Lado del servidor

 class Todo(Resource): def post(self): # create a new todo conn = pool.getconn() cur = conn.cursor() app.logger.info(request.form['title']) cur.execute("INSERT INTO todo (task, done) VALUES (%s, %s)", (request.form['title'], False)) conn.commit() app.logger.error(e) cur.close() pool.putconn(conn)

Otros métodos no mostrados

Luego, el resto del código del servidor que adjunta el recurso a la API y la configuración de CORS (no se muestra en el orden de los archivos)

 app = Flask(__name__) CORS(app, methods=['POST','GET','PUT','DELETE']) api = Api(app) api.add_resource(Todo, '/todo/') app.run(debug = True, host='0.0.0.0', port=port)

Pruebas

Usar python para probar la api funciona bien, ejecutar esto en un archivo python separado se agregará a la base de datos.

 response = requests.post(URL + "todo/", data={"title": f"test{randint(1, 100)}"})

Mi mejor suposición es que axios no está agregando los datos a la solicitud de una manera que el backend no pueda procesar. Antes de usar axios, traté de hacer la solicitud con XMLHttprequest, sin embargo, esto presentaba el mismo problema. Cambié a axios por recomendación de otra persona, dada su supuesta simplicidad mejorada.