Flask React GET Richiesta GET sta fallendo ma la richiesta POST ha successo

Question

Flask React GET Richiesta GET sta fallendo ma la richiesta POST ha successo

voti

22

Sono un po' un principiante nel reagire. Ho sviluppato un backend per fiaschette e ora voglio abbinarlo a React per il frontend.

Sto usando fetchin React per fare la richiesta GET. Quando leggo i dati, il testo o la risposta quando chiamo response.text()è il index.htmlfile nella publicdirectory della mia app

Ecco il mio codice di reazione:

componentDidMount() {
    fetch('/')
      .then(response => {
        console.log(response.text()) //Here is the text() i said before
        this.setState({ snippets: response.data })
      })
      .catch(error=>{
        console.log(error)
      })
  }

Ecco il MRE della mia applicazione per fiaschette:

@app.route('/')
def index():
    return {'snippets':['blah','blaha']

La mia delega in package.json

    proxy: http://127.0.0.1:5000/

Il mio backend per fiaschette funziona alla porta 5000 e reagisce alla porta 3000

Una cosa da notare è che una richiesta POST (da <form>) viene inviata al server backend e posso recuperare il contenuto della richiesta POST in fiaschetta. E' la richiesta GET che usa fetchche non funziona.

Struttura dell'elenco:

-env
-getcode
  -templates
  -static
  -__init__.py
  -routes.py
-getcode-client
  -src
  -public
run.py

Qui getcodec'è la directory dell'app del flask e getcode-clientcontiene l'app React creata usando create-react-app

NOTA: Ho anche provato ad impostare un proxy manuale come questo: https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

ma ora l'app react non viene mostrata. mostra completamente l'uscita json del mio backend del fiasco

python reactjs flask fetch

È pubblicato 12/05/2020 alle 12:30
fonte dall'utente Code Yard

In altre lingue...

2 risposte

Damian Busz · Answer 1 · 2020-05-15 10:57

Dato che state usando CRA, vi suggerirei di usare la loro impostazione proxy.

Per segnalare al server di sviluppo di proxy qualsiasi richiesta sconosciuta al vostro server API in fase di sviluppo, aggiungete un campo proxy al vostro package.json, per esempio:

"proxy": "http://localhost:4000",

Nel vostro caso questo sarà sulla porta 5000.

Qui c'è di più sull'argomento.

Tuttavia, in produzione suggerirei di usare nginx o apache per evitare problemi in futuro.

Dex · Answer 2 · 2020-05-15 10:49

Non sono sicuro, ma penso che il problema sia che il vostro utilizzo sia di React che di Flask su localhost, e non specificando il porto nelle fetchrichieste, provate questo:

componentDidMount() {
    fetch('/:5000')
      .then(response => {
        console.log(response.text()) //Here is the text() i said before
        this.setState({ snippets: response.data })
      })
      .catch(error=>{
        console.log(error)
      })
  }