Estoy escribiendo una aplicación React simple que toma datos de formularios y los envía a una API de Python. La API está escrita en FastAPI y se ve así:
from fastapi import FastAPI from pydantic import BaseModel import json app = FastAPI() class TextInfer(BaseModel): text: str @app.get("/") def hello(): return "hello" @app.post("/predict") def predict(req: TextInfer): return req cURL funciona para enviar un objeto JSON simple al punto final de predict :
> curl -d '{"text": "sample text"}' -H "Accept: application/json" -H "Content-Type: application/json" -X POST http://0.0.0.0/predict > {"text":"sample text"}% Pero la llamada de fetch de React siempre da como resultado un 422:
fetch('http://0.0.0.0/predict', { method: 'POST', mode: 'no-cors', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: JSON.stringify({'text': this.state.text}) }) .then(res => res.json()) .then( (result) => { this.setState({ isLoaded: true, predictions: result }); }, (error) => { this.setState({ isLoaded: true, error: error }); } ) this.state.text es una cadena simple; Revisé la consola del navegador para verificar que
{'text': this.state.text} es un objeto JSON válido. Parece ser, por ejemplo, {"text": "blah"} .
La respuesta siempre se lee como:
[HTTP/1.1 422 Unprocessable Entity 13ms] Object { msg: "value is not a valid dict", type: "type_error.dict", loc: […] } loc [ "body" ] Supongo que esto tiene algo que ver con la forma en que implementé el modelo Pydantic, o cómo llamo a fetch desde React, o ambos. Mirar preguntas similares no ha ayudado a resolver el problema. También intenté codificar el body de la llamada de fetch (en caso de que mi uso de JSON.stringify fuera incorrecto), pero obtengo el mismo error.
en
@app.post("/predict") def predict(req: TextInfer): return req devuelve la cadena, porque cambia json a cadena en el body: JSON.stringify({'text': this.state.text})
¿Puedes comprobar qué valor hay? si es realmente una cadena, entonces puede analizar esa cadena.
En python, puede usar simplemente importar la biblioteca json como import json y luego cambiar la última línea de return req para return json.loads(req)