Το αίτημα Flask React GET αποτυγχάνει, αλλά το αίτημα POST είναι επιτυχές

ψήφοι
0

Είμαι λίγο αρχάριος στο React. Δημιούργησα ένα backend Flask και τώρα θέλω να το συνδυάσω με το React for frontend.

χρησιμοποιώ fetch στο React για να υποβάλετε το αίτημα GET. Όταν διαβάζω τα δεδομένα, το κείμενο ή την απάντηση όταν τηλεφωνώ response.text() είναι το index.html αρχείο στο public κατάλογος της εφαρμογής μου

Εδώ είναι ο κωδικός αντίδρασης μου:

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

Εδώ είναι το MRE της εφαρμογής φιάλης μου:

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

Ο πληρεξούσιος μου στο package.json

    proxy: http://127.0.0.1:5000/

Το backend της φιάλης μου λειτουργεί στη θύρα 5000 και αντιδρά στη θύρα 3000

Ένα πράγμα που πρέπει να σημειωθεί είναι ότι ένα αίτημα POST (από <form> ) παίρνει πληρεξούσιο στον διακομιστή backend και μπορώ να ανακτήσω το περιεχόμενο της αίτησης POST στη φιάλη. Είναι το αίτημα GET που χρησιμοποιεί fetch αυτό δεν λειτουργεί.

Δομή καταλόγου:

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

Εδώ getcode είναι ο κατάλογος της εφαρμογής φιάλης και getcode-client περιέχει την εφαρμογή React που δημιουργήθηκε χρησιμοποιώντας create-react-app

ΣΗΜΕΙΩΣΗ: Προσπάθησα επίσης να εγκαταστήσω έναν μη αυτόματο διακομιστή μεσολάβησης ως εξής: https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

αλλά τώρα δεν εμφανίζεται η εφαρμογή react. δείχνει εντελώς την έξοδο json της φιάλης μου.

Δημοσιεύθηκε 12/05/2020 στις 12:30
πηγή χρήστη
Σε άλλες γλώσσες...                            


2 απαντήσεις

ψήφοι
0

Εφόσον χρησιμοποιείτε το CRA, θα πρότεινα να χρησιμοποιήσετε τη ρύθμιση διακομιστή μεσολάβησης.

Για να πείτε στον διακομιστή ανάπτυξης να κάνει διακομιστή μεσολάβησης τυχόν άγνωστα αιτήματα στον διακομιστή API που βρίσκονται σε εξέλιξη, προσθέστε ένα πεδίο διακομιστή μεσολάβησης στο package.json, για παράδειγμα:

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

Στην περίπτωσή σας, αυτό θα βρίσκεται στη θύρα 5000.

Εδώ είναι περισσότερα για το θέμα.

Ωστόσο, στην παραγωγή θα πρότεινα να χρησιμοποιήσω το nginx ή το apache για να αποφύγουμε προβλήματα στο μέλλον.

Απαντήθηκε 15/05/2020 στις 10:57
πηγή χρήστη

ψήφοι
0

Δεν είμαι σίγουρος, αλλά νομίζω ότι το πρόβλημα είναι ότι χρησιμοποιείτε το React και το Flask στο localhost και δεν καθορίζετε τη θύρα στο fetch αιτήματα, δοκιμάστε το:

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)
      })
  }
Απαντήθηκε 15/05/2020 στις 10:49
πηγή χρήστη

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