400 Bad Request：浏览器发送了一个服务器无法理解的请求答案

【问题标题】：400 Bad Request: The browser sent a request that this server could not understand400 Bad Request：浏览器发送了一个服务器无法理解的请求
【发布时间】：2020-10-17 22:16:46
【问题描述】：

我从 codeside 学院的 YouTube 视频中获得了这段代码。对他很好，但我遇到了问题。控制台错误：

    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

服务器错误-

    werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request 
    that this server could not understand.
    KeyError: 'user_input'

我有这些文件

server.py

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)

和，api.html

<html>
<head>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src=""></script>
    <script src=""></script>
</head>
<body>
<div class="container">
    <h1>Let's Talk</h1>

    <div id="userinput" class="alert alert-success" role="alert"></div>
    <div id="botresponse" class="alert alert-danger" role="alert"></div>
    <input type = "text" name = "user_input" class="input-small"><br><br>
    <button onclick="sendToServer()" class="btn btn-success" id="button">Send</button>
    <span></span>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>

    function sendToServer(){
        console.log("clicked")
        $.ajax({
            data :{
                user_input: $("#user_input").val()
            },
            type: "POST",
            url: "http://127.0.0.1:8000/api/talk" ,
            contentType: "application/json" ,
            headers: "Access-Control-Allow-Origin: " ,
        }).done(function(data){
            console.log(data)
            let user = $("#user_input").val()
            document.getElementById("userinput").innerText=user,
            document.getElementById("botresponse").innerText=data.msg
        })
    }

</script>
</body>
</html>

在我将 .json 更改为 .form 以集成 API 之前，server.py 可以与 Postman 一起正常工作。

【问题讨论】：

请阅读Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - 总结是这不是解决志愿者的理想方式，并且可能会适得其反。请不要将此添加到您的问题中。
@CAM_344 这不起作用。请提出其他建议。
您的主要问题是$("#user_input").val() 意味着您从具有id="user_input" 但您的<input> 只有name="user_input" 的元素中获得价值

标签： javascript python jquery flask postman

【解决方案1】：

错误KeyError: 'user_input' 表示您尝试获取form["user_input"]，但form 中没有"user_input" - 可能浏览器没有发送它 - 例如，如果您收到GET 请求，那么它可能没有它.

您可以查看print(request.form) 以查看您在form 中获得了什么

当表单中没有'user_input' 时，您可以使用form.get('user_input') 获取None

user_input = request.form.get('user_input')

或者你应该在得到之前检查密钥并在没有密钥时发送不同的东西

if 'user_input' in request.form
     user_input = request.form.get('user_input')
     return jsonify({'msg':str(trainer.brain(user_input))})
else:
     return "WRONG DATA"

或者，也许您应该检查您是否收到POST 请求

if request.method == 'POST':
     user_input = request.form.get('user_input')
     return jsonify({'msg':str(trainer.brain(user_input))})
else:
     return "HELLO WORLD"

顺便说一句：

今天与KeyError有类似问题HTML range slider to Flask with AJAX call

编辑：

JavaScript 代码中的错误很少

代码$("#user_input").val() 表示您想从具有id="user_input" 但您的<input> 只有name="user_input" 的元素中获取值。您必须添加id="user_input"。

要发送标题，您需要字典

headers: {"Access-Control-Allow-Origin": "*"}

要以 JSON 格式发送，您需要将数据转换为 JSON

data: JSON.stringify({ user_input: $("#user_input").val() }),

然后你必须使用request.json 而不是`request.form

user_input = request.json['user_input']

最小的工作示例。

我使用render_template_string 将所有代码放在一个文件中 - 这样每个人都可以简单地运行它。

from flask import Flask, jsonify, request, render_template_string
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/')
@app.route('/api/talk', methods=['POST'])
def index():
    if request.method == 'POST':
        print('form:', request.form)
        print('data:', request.data)
        print('json:', request.json)
        user_input = request.json['user_input']
        return jsonify({'msg': 'My Answer'})
    else:
        return render_template_string('''<html>
<head>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src=""></script>
    <script src=""></script>
</head>
<body>
<div class="container">
    <h1>Let's Talk</h1>

    <div id="userinput" class="alert alert-success" role="alert"></div>
    <div id="botresponse" class="alert alert-danger" role="alert"></div>
    <input type="text" id="user_input" class="input-small"><br><br>
    <button onclick="sendToServer()" class="btn btn-success" id="button">Send</button>
    <span></span>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
    function sendToServer(){
        console.log("clicked");
        $.ajax({
            data: JSON.stringify({ user_input: $("#user_input").val() }),
            type: "POST",
            url: "http://127.0.0.1:8000/api/talk",
            contentType: "application/json",
            headers: {"Access-Control-Allow-Origin": "*"},
        }).done(function(data){
            console.log(data);
            let user = $("#user_input").val();
            document.getElementById("userinput").innerText=user;
            document.getElementById("botresponse").innerText=data.msg;
        });
    }
</script>
</body>
</html>''')

if __name__ == '__main__':
  app.run(host='127.0.0.1', port=8000, debug=True, use_reloader=False)

【讨论】：