title: 400 Bad Request: The browser sent a request that this server could not understand
body: <p>I had this code from a YouTube video of codeside academy. worked good for him but I am experiencing issues. Console errors:</p>
  <pre><code>    Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/talk' from origin 'null' has been blocked 
      by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  
      POST http://127.0.0.1:8000/api/talk net::ERR_FAILED
  </code></pre>
  <p>SERVER errors-</p>
  <pre><code>    werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request 
      that this server could not understand.
      KeyError: 'user_input'
  </code></pre>
  <p>I have these files</p>
  <p>server.py</p>
  <pre><code>from flask import Flask, jsonify, request
  from flask_cors import CORS
  import trainer
  app = Flask(__name__)
  CORS(app)
  
  @app.route('/')
  @app.route('/api/talk',methods=['POST'])
  def index():
      user_input = request.form['user_input']
      return jsonify({'msg':str(trainer.brain(user_input))})
  
  if __name__ == '__main__':
    app.run(host='127.0.0.1', port=8000, debug=True)
  
  </code></pre>
  <p>and , api.html</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css&quot;&gt;
      &lt;script src=&quot;&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class=&quot;container&quot;&gt;
      &lt;h1&gt;Let's Talk&lt;/h1&gt;
  
      &lt;div id=&quot;userinput&quot; class=&quot;alert alert-success&quot; role=&quot;alert&quot;&gt;&lt;/div&gt;
      &lt;div id=&quot;botresponse&quot; class=&quot;alert alert-danger&quot; role=&quot;alert&quot;&gt;&lt;/div&gt;
      &lt;input type = &quot;text&quot; name = &quot;user_input&quot; class=&quot;input-small&quot;&gt;&lt;br&gt;&lt;br&gt;
      &lt;button onclick=&quot;sendToServer()&quot; class=&quot;btn btn-success&quot; id=&quot;button&quot;&gt;Send&lt;/button&gt;
      &lt;span&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;script src=&quot;https://code.jquery.com/jquery-3.2.1.min.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
  
      function sendToServer(){
          console.log(&quot;clicked&quot;)
          $.ajax({
              data :{
                  user_input: $(&quot;#user_input&quot;).val()
              },
              type: &quot;POST&quot;,
              url: &quot;http://127.0.0.1:8000/api/talk&quot; ,
              contentType: &quot;application/json&quot; ,
              headers: &quot;Access-Control-Allow-Origin: &quot; ,
          }).done(function(data){
              console.log(data)
              let user = $(&quot;#user_input&quot;).val()
              document.getElementById(&quot;userinput&quot;).innerText=user,
              document.getElementById(&quot;botresponse&quot;).innerText=data.msg
          })
      }
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  <p>The server.py was working fine with Postman until I changed .json to .form there in order to integrate the API.</p>