Flask React GET Request nie działa, ale POST Request działa poprawnie

głosy
22

Jestem trochę początkującym Reactem. Opracowałem backend Flask i teraz chcę go sparować z Reactem na froncie.

Używam fetchw Reactie, żeby zrobić GET Request. Kiedy czytam dane, tekst lub odpowiedź podczas połączenia response.text()jest index.htmlplikiem w publickatalogu mojej aplikacji

Oto mój kod reakcji:

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

Tu jest MRE mojej aplikacji kolby:

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

Mój pełnomocnik w package.json

    proxy: http://127.0.0.1:5000/

Mój backend kolby działa w porcie 5000 i reaguje w porcie 3000

Jedną z rzeczy, które należy zwrócić uwagę jest to, że żądanie POST (z <form>) jest przenoszone na serwer backendowy i mogę pobrać zawartość żądania POST w kolbie. Jest to żądanie GET, fetchktóre nie działa.

Struktura katalogowa:

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

Oto getcodekatalog aplikacji kolby i getcode-clientzawiera aplikację React stworzoną przy użyciu create-react-app

UWAGA: Próbowałem też ustawić ręczny serwer proxy jak ten: https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

ale teraz aplikacja reakcji nie jest pokazana. Całkowicie pokazuje wyjście Jsona z mojej kolby

Utwórz 12/05/2020 o 12:30
źródło użytkownik
W innych językach...                            


2 odpowiedzi

głosy
0

Ponieważ używasz CRA, proponowałbym użyć ich ustawienia proxy.

Aby powiedzieć serwerowi programistycznemu, aby serwer proxy wysyłał nieznane żądania do twojego serwera API, dodaj pole proxy do twojego package.json, na przykład:

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

W twoim przypadku będzie to na porcie 5000.

Tutaj jest więcej na ten temat.

Jednak na produkcji proponuję używać nginx lub apache, aby uniknąć problemów w przyszłości.

Odpowiedział 15/05/2020 o 10:57
źródło użytkownik

głosy
0

Nie jestem pewien, ale myślę, że problem polega na tym, że używacie zarówno Reacta, jak i Flaska na localhostach, a nie określacie portu w fetchżądaniach, spróbujcie tego:

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)
      })
  }
Odpowiedział 15/05/2020 o 10:49
źródło użytkownik

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