फ्लास्क रिएक्ट GET अनुरोध विफल हो रहा है लेकिन POST अनुरोध सफल है

वोट
22

मैं प्रतिक्रिया के लिए एक शुरुआत का एक सा हूँ। मैंने एक फ्लास्क बैकएंड विकसित किया और अब मैं इसे रिएक्ट फॉर फ्रंटेंड के साथ जोड़ना चाहता हूं।

मै इस्तेमाल कर रहा हूँ fetch प्रतिक्रिया में 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/

मेरा फ्लास्क बैकएंड पोर्ट 5000 पर चल रहा है और पोर्ट 3000 पर प्रतिक्रिया करता है

एक बात का ध्यान रखें कि POST अनुरोध (से) है <form> ) बैकएंड सर्वर के लिए अनुमानित है और मैं फ्लास्क में POST अनुरोध की सामग्री को पुनः प्राप्त कर सकता हूं। इसका उपयोग करके GET अनुरोध fetch वह काम नहीं कर रहा है।

निर्देशिका संरचना:

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

यहाँ getcode कुप्पी एप्लिकेशन की निर्देशिका है और getcode-client उपयोग करके बनाया गया रिएक्ट ऐप है create-react-app

नोट: इसके अलावा मैंने इस तरह एक मैनुअल प्रॉक्सी सेटअप करने की कोशिश की: https://create-react-app.dev/docs/proxying-ap-requests-in-development/#configuring-the-proxy-manually

लेकिन अब प्रतिक्रिया ऐप नहीं दिखाया गया है। यह पूरी तरह से मेरे फ्लास्क बैकेंड के जोंस आउटपुट को दिखाता है।

12/05/2020 को 12:30
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


2 जवाब

वोट
0

चूंकि आप CRA का उपयोग कर रहे हैं, मैं उनके प्रॉक्सी सेटिंग का उपयोग करने का सुझाव दूंगा।

विकास सर्वर को अपने एपीआई सर्वर में किसी भी अज्ञात अनुरोध को प्रॉक्सी में बताने के लिए, अपने पैकेज के लिए एक प्रॉक्सी फ़ील्ड जोड़ें। उदाहरण के लिए:

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

आपके मामले में यह पोर्ट 5000 पर होगा।

यहाँ विषय पर अधिक है।

हालांकि, उत्पादन पर मैं भविष्य में मुद्दों से बचने के लिए नगनेक्स या अपाचे का उपयोग करने का सुझाव दूंगा।

15/05/2020 को 10:57
का स्रोत उपयोगकर्ता

वोट
0

मुझे यकीन नहीं है, लेकिन मुझे लगता है कि समस्या यह है कि लोकलहोस्ट पर रिएक्ट और फ्लास्क दोनों का उपयोग करना, और पोर्ट को निर्दिष्ट नहीं करना है 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