Estoy siguiendo https://blog.miguelgrinberg.com/post/how-to-create-a-react--flask-project intentando conectar un backend de Flask simple con ReactJS después de usar npx create-react-app y agregar un archivo de un solo matraz.
package.json
Configuré un proxy en "proxy": "http://localhost:5000" con un nuevo comando de script de yarn start-backend .
"scripts": { "start": "react-scripts start", "start-backend": "cd app && python3 app.py", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, nav.js
Configuré un Button usando MaterialUI que llama a una función para registrar una respuesta JSON.
class Nav extends React.Component { clicked() { fetch('/').then(res => { console.log(res.json()); }).then(data => { console.log(data); }) } render() { return ( <Box sx={{ flexGrow: 1}}> <AppBar position="static"> <Toolbar> <SignUpForm onClick={() => this.clicked()} /> </Toolbar> </AppBar> </Box> ) } } En el directorio de nivel superior, he creado un directorio llamado app que tiene un archivo app.py con el siguiente código.
from flask import Flask app = Flask(__name__) @app.route("/") def home(): return {"msg": "homepage from the backend."} if __name__ == "__main__": app.run(port=5000, debug=True) Cuando uso yarn start y yarn start-backend y hago clic en el botón, aparece el siguiente error
Promise {<pending>} nav.js:14 undefined VM1769:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 Intentando depurar, pero desafortunadamente no llego a ninguna parte. Hay preguntas relacionadas, pero nada parece funcionar. Intenté mover el archivo del matraz al directorio de nivel superior, al público, usando http://localhost:5000/ .
fetch('/', { headers : { 'Content-Type': 'application/json', 'Accept': 'application/json' } }).then(res => { console.log(res.json()); }).then(data => { console.log(data); })Ok, siendo nuevo en JavaScript/ReactJS, parece que me faltaban dos cosas
Promise , lo que parece extraño porque pensé que no tenías que devolver las cosas.y
/ a /api/test parece funcionar.Tendré que profundizar más para entender, pero por ahora resuelve mi problema.
Aquí está el código que ha cambiado
clicked() { fetch('/api/test') .then(res => {return res.json()} ) .then( data => { console.log(data) }) }y
@app.route("/api/test") def home(): return {"msg": "homepage from the backend."}