Fles React GET Request mislukt, maar POST Request is succesvol

stemmen
0

Ik ben een beetje een beginner in React. Ik heb een Flask backend ontwikkeld en nu wil ik deze koppelen aan React voor frontend.

Ik gebruik fetchin React om het GET-verzoek te doen. Als ik de gegevens lees, is de tekst of het antwoord bij het bellen response.text()het index.htmlbestand in de publicdirectory van mijn app

Hier is mijn reactiecode:

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

Hier is de MRE van mijn kolf app:

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

Mijn gevolmachtigde in package.json

    proxy: http://127.0.0.1:5000/

Mijn kolf backend draait op poort 5000 en reageert op poort 3000

Een ding om op te merken is dat een POST-verzoek (van <form>) wel degelijk naar de backend server wordt gestuurd en ik de inhoud van het POST-verzoek in de kolf kan ophalen. Het is het GET verzoek fetchdat niet werkt.

Gidsenstructuur:

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

Hier getcodeis de directory van de kolf app en getcode-clientbevat de React app gemaakt met behulp van create-react-app

OPMERKING: Ook heb ik geprobeerd om een handmatige proxy als deze in te stellen: https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

maar nu wordt de reactie app niet getoond. het toont volledig de json uitgang van mijn kolf backend

De vraag is gesteld op 12/05/2020 om 12:30
bron van user
In andere talen...                            


2 antwoorden

stemmen
0

Aangezien u CRA gebruikt, stel ik voor om hun proxy-instelling te gebruiken.

Om de ontwikkelingsserver te vertellen dat er onbekende verzoeken aan uw API-server in ontwikkeling zijn, voegt u bijvoorbeeld een proxy-veld toe aan uw package.json:

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

In uw geval zal dit op poort 5000 zijn.

Hier is meer over het onderwerp.

Echter, op de productie zou ik voorstellen om nginx of apache te gebruiken om problemen in de toekomst te voorkomen.

antwoordde op 15/05/2020 om 10:57
bron van user

stemmen
0

Ik weet het niet zeker, maar ik denk dat het probleem is dat je zowel React als Flask op localhost gebruikt, en niet de poort in de fetchverzoeken specificeert, probeer dit:

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)
      })
  }
antwoordde op 15/05/2020 om 10:49
bron van user

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