Solicitarea GET din Flask React GET eșuează, dar solicitarea POST are succes

voturi
0

Sunt un pic începător să reacționez. Am dezvoltat un back-end Flask și acum vreau să-l asociez cu React pentru frontend.

eu folosesc fetch din React pentru a face solicitarea GET. Când citesc datele, textul sau răspunsul când sun response.text() este index.html fișier în public directorul aplicației mele

Iată codul meu de reacție:

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)
      })
  }

Iată MRE-ul aplicației mele flacon:

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

Proxy-ul meu în package.json

    proxy: http://127.0.0.1:5000/

Backendul meu de flask rulează la portul 5000 și reacționează la portul 3000

Un lucru de remarcat este faptul că o solicitare POST (de la <form> ) se preia pe serverul backend și pot prelua conținutul cererii POST în flacon. Este cererea GET folosind fetch asta nu funcționează.

Structura directorului:

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

Aici getcode este directorul aplicației flacon și getcode-client conține aplicația React creată utilizând create-react-app

NOTĂ: De asemenea, am încercat să configurez un proxy manual ca acesta: https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

dar acum aplicația de reacție nu este afișată. arată complet ieșirea json a back-ului meu.

Întrebat 12/05/2020 la 12:30
sursa de către utilizator
În alte limbi...                            


2 răspunsuri

voturi
0

Deoarece utilizați CRA, v-aș sugera să folosiți setarea lor proxy.

Pentru a spune serverului de dezvoltare să proxy orice solicitări necunoscute serverului dvs. API în curs de dezvoltare, adăugați un câmp proxy la pachetul dvs..json, de exemplu:

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

În cazul dumneavoastră, acesta va fi pe portul 5000.

Iată mai multe pe această temă.

Cu toate acestea, la producție, aș sugera să utilizați nginx sau apache pentru a evita probleme în viitor.

Publicat 15/05/2020 la 10:57
sursa de către utilizator

voturi
0

Nu sunt sigur, dar cred că problema este că utilizați React și Flask pe localhost și nu specificați portul în fetch solicitări, încercați acest lucru:

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)
      })
  }
Publicat 15/05/2020 la 10:49
sursa de către utilizator

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more