title: React axios GET null data from Flask backend
body: <p>I have a react form in frontend where users can submit a question they wanna ask. Send the form data to flask server, using some NLP models to compute and get a result. Then return the result to the frontend.</p>
  
  <p>The problem is: I can see the data posted to flask server, but getting null when I try to GET results from flask server.</p>
  
  <p>Here is the handleSubmit method in QuestionForm.js in frontend:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// post data to flask
  axios.post('http://localhost:5000/api/newquestion', this.state)
  .then(response =&gt; {
      console.log(response)
  })
  .catch(error =&gt; {
      console.log(error)
  })</code></pre>
  </div>
  </div>
  </p>
  
  <p>componentDidMount() method in QuestionResult.js:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class QuestionResult extends Component {
      constructor() {
          super();
          this.state = {
              questionResult: ''
          }
      }
  
      componentDidMount() {
          axios.post('http://localhost:5000/api/newquestion')
          .then(response =&gt; {
              console.log(response)
              this.setState({questionResult: response.data})
          })
          .catch(error =&gt; {
              console.log(error);
          })
      }
  
      render() {
          const {questionResult} = this.state
  
          return (
              &lt;div&gt;
                  &lt;h1&gt;{questionResult}&lt;/h1&gt;
              &lt;/div&gt;
          )
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The flask endpoint (It is just a test model and I am trying to return the question itself right now):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>from flask import Flask, request, jsonify
  from flask_cors import CORS
  
  app = Flask(__name__)
  CORS(app)
  
  @app.route("/api/newquestion", methods=['GET', 'POST'])
  def get_user_question():
      if request.method == 'POST':
          user_question = request.get_json()
          print(user_question)
      return jsonify(user_question)
  
  app.run(port=5000, debug=True)</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is what I get from python console:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>127.0.0.1 - - [20/Nov/2019 23:01:12] "OPTIONS /api/newquestion HTTP/1.1" 200 -
  None
  127.0.0.1 - - [20/Nov/2019 23:01:12] "GET /api/newquestion HTTP/1.1" 200 -
  {'question': 'aaaa'}
  127.0.0.1 - - [20/Nov/2019 23:01:13] "POST /api/newquestion HTTP/1.1" 200</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, when I import another function test.py:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>def hello():
      return "hi there!"</code></pre>
  </div>
  </div>
  </p>
  
  <p>And changed the endpoint to:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>@app.route("/api/newquestion", methods=['GET', 'POST'])
  def get_user_question():
      return hello()</code></pre>
  </div>
  </div>
  </p>
  
  <p>I can see the message "hi there!" successfully rendered on my react page.</p>