Flask React GET İsteği başarısız, ancak POST İsteği başarılı

oy
22

Tepki vermeye yeni başlayan biriyim. Bir Flask arka ucu geliştirdim ve şimdi ön uç için React ile eşleştirmek istiyorum.

Ben kullanıyorum fetch GET Talebi yapmak için React. Verileri okuduğumda, aradığımda metin veya yanıt response.text() bu index.html içindeki dosya public uygulamamın dizini

İşte benim tepki kodu:

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

İşte benim şişe uygulaması MRE:

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

Vekil sunucu package.json

    proxy: http://127.0.0.1:5000/

Şişe arka ucum 5000 numaralı bağlantı noktasında çalışıyor ve 3000 numaralı bağlantı noktasına tepki veriyor

Dikkat edilmesi gereken bir nokta, bir POST isteğinin ( <form> ) arka uç sunucusuna proxied olsun ve şişeye POST isteğinin içeriğini alabilirsiniz. Onun GET isteği kullanarak fetch bu işe yaramıyor.

Dizin yapısı:

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

Buraya getcode flask uygulamasının dizini ve getcode-client kullanılarak oluşturulan React uygulamasını içerir create-react-app

NOT: Ayrıca böyle bir el ile proxy kurmaya çalıştım: https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

ancak şimdi reaksiyon uygulaması gösterilmiyor. şişemin arka ucunun json çıktısını tamamen gösteriyor.

Oluştur 12/05/2020 saat 12:30
kaynak kullanıcı
Diğer dillerde...                            


2 cevaplar

oy
0

CRA kullandığınız için proxy ayarlarını kullanmanızı öneririm.

Geliştirme sunucusuna, geliştirme sırasında API sunucunuza bilinmeyen istekleri proxy olarak bildirmesini söylemek için package.json'unuza bir proxy alanı ekleyin, örneğin:

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

Sizin durumunuzda bu 5000 numaralı bağlantı noktasında olacaktır.

İşte konuyla ilgili daha fazla bilgi.

Bununla birlikte, üretimde gelecekte sorunları önlemek için nginx veya apache kullanmanızı öneririm.

Cevap 15/05/2020 saat 10:57
kaynak kullanıcı

oy
0

Emin değilim, ama sorunun localhost üzerinde hem React hem de Flask kullanmanız ve bağlantı noktasını belirtmemeniz olduğunu düşünüyorum. fetch istekleri için şunu deneyin:

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)
      })
  }
Cevap 15/05/2020 saat 10:49
kaynak kullanıcı

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