title: React and Flask POST request Error: CORS policy: No 'Access-Control-Allow-Origin'
body: <p>I'm trying to send form data from a simple react control form to my flask server. My flask server appears to receive the data but I cant send a response and i get this error. I want to display the response in my react page right under the input field. This was easy to do in flask alone with return render_template</p>
  <p>Please help if you can if not thank you anyway.</p>
  <p>Error:</p>
  <pre><code>Access to XMLHttpRequest at 'http://127.0.0.1:5000/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  </code></pre>
  <p>My React directory structure looks like this:</p>
  <pre><code>form
      api/ticker.py
  
      src
          components/Form.js
          app.js
     
  </code></pre>
  <p>This is my package.json:</p>
  <pre><code>{
    &quot;name&quot;: &quot;form-handling-example&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@testing-library/jest-dom&quot;: &quot;^4.2.4&quot;,
      &quot;@testing-library/react&quot;: &quot;^9.5.0&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^7.2.1&quot;,
      &quot;axios&quot;: &quot;^0.20.0&quot;,
      &quot;cors&quot;: &quot;^2.8.5&quot;,
      &quot;react&quot;: &quot;^16.13.1&quot;,
      &quot;react-dom&quot;: &quot;^16.13.1&quot;,
      &quot;react-scripts&quot;: &quot;3.4.3&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: &quot;react-app&quot;
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    },
    &quot;proxy&quot;: &quot;http://127.0.0.1:5000&quot;
  }
  </code></pre>
  <p>My Flask app looks like this:</p>
  <pre><code>from flask import Flask, request, render_template, jsonify, json
  from flask_cors import CORS, cross_origin
  
  app = Flask(__name__)
  
  CORS(app, support_credentials=True)
  
  
  @app.route(&quot;/&quot;, methods=['POST'])
  @cross_origin(supports_credentials=True)
  def contracts():
  
      react_form_data = request.get_json()
  
      ticker = react_form_data['ticker']
  
      return ticker
  
  
  if __name__ == &quot;__main__&quot;:
      app.run(debug=True)
  </code></pre>
  <p>This is the component/Form.js file:</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  
  class Form extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        ticker: &quot;&quot;,
      };
    }
  
    handleTickerChange = (event) =&gt; {
      this.setState({
        ticker: event.target.value,
      });
    };
  
    handleSubmit = (event) =&gt; {
      event.preventDefault();
      console.log(this.state);
      axios
        .post(&quot;http://127.0.0.1:5000&quot;, this.state)
        .then((response) =&gt; {
          console.log(response);
        })
        .catch((error) =&gt; {
          console.log(error);
        });
    };
  
    render() {
      return (
        &lt;form onSubmit={this.handleSubmit}&gt;
          &lt;div&gt;
            &lt;label&gt;Ticker &lt;/label&gt;
            &lt;input
              type=&quot;text&quot;
              name=&quot;ticker&quot;
              value={this.state.ticker}
              onChange={this.handleTickerChange}
            /&gt;
            &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
        {ticker}
      );
    }
  }
  
  export default Form;
  </code></pre>