Flaskreaksjon GET-forespørsel mislykkes, men POST-forespørselen er vellykket

stemmer
0

Jeg er litt nybegynner til React. Jeg utviklet en Flask-backend, og nå vil jeg koble den med React for frontend.

jeg bruker fetch i React for å gjøre GET-forespørselen. Når jeg leser dataene, teksten eller svaret når jeg ringer response.text() er den index.html fil i public katalogen til appen min

Her er min reaksjonskode:

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

Her er MRE for flaske-appen min:

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

Min fullmektig inn package.json

    proxy: http://127.0.0.1:5000/

Kolbenes backend kjører ved port 5000 og reagerer i port 3000

En ting å merke seg er at en POST-forespørsel (fra <form> ) kommer i nærheten av backend-serveren, og jeg kan hente innholdet i POST-forespørselen i kolbe. Det er GET-forespørselen med fetch det fungerer ikke.

Katalogstruktur:

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

Her getcode er katalogen til kolbeappen og getcode-client inneholder React-appen som er opprettet med create-react-app

MERKNAD: Jeg prøvde også å konfigurere en manuell proxy som denne: https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

men nå vises ikke reaksjonsappen. det viser fullstendig min flaske backend's json-utgang.

Publisert på 12/05/2020 klokken 12:30
kilden bruker
På andre språk...                            


2 svar

stemmer
0

Siden du bruker CRA, vil jeg foreslå å bruke proxy-innstillingen deres.

For å fortelle utviklingsserveren å proxy eventuelle ukjente forespørsler til API-serveren din i utvikling, legger du til et proxy-felt til package.json, for eksempel:

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

I ditt tilfelle vil dette være på port 5000.

Her er mer om temaet.

Imidlertid vil jeg på produksjon foreslå å bruke nginx eller apache for å unngå problemer i fremtiden.

Svarte 15/05/2020 kl. 10:57
kilden bruker

stemmer
0

Jeg er ikke sikker, men jeg tror at problemet er at du bruker både React og Flask på localhost, og ikke spesifiserer porten i fetch forespørsler, prøv dette:

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)
      })
  }
Svarte 15/05/2020 kl. 10:49
kilden bruker

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