Fatal编程技术网
  • javascript/
  • Javascript 400错误请求：浏览器发送了此服务器无法理解的请求

Javascript 400错误请求：浏览器发送了此服务器无法理解的请求

javascript python jquery flask postman

Javascript 400错误请求：浏览器发送了此服务器无法理解的请求,javascript,python,jquery,flask,postman,Javascript,Python,Jquery,Flask,Postman,我从codeside academy的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

我从codeside academy的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>



让我们谈谈



发送
函数sendToServer（）{
console.log（“单击”）
$.ajax({
数据：{
用户输入：$（“#用户输入”）.val（）
},
类型：“POST”，
url:“http://127.0.0.1:8000/api/talk" ,
contentType:“应用程序/json”，
标题：“访问控制允许来源：”，
}).完成（功能（数据）{
console.log（数据）
let user=$（“#user_input”）.val（）
document.getElementById（“userinput”）.innerText=user，
document.getElementById（“botresponse”）.innerText=data.msg
})
}
在我将.json改为.form以集成API之前，server.py与Postman的工作状态良好。

Error
KeyError:“user\u input”
表示您尝试获取
表单[“user\u input”]
，但没有
“user\u input”
在
表单中
-可能浏览器没有发送它-例如，如果您收到
get
请求，那么它可能没有

您可以检查
print（request.form）
查看
表单中的内容

当表单中没有
'user\u input'
时，您可以使用
form.get（'user\u 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
也出现了类似的问题



编辑：

在
JavaScript
代码中几乎没有错误

Code$（“#user_input”）.val（）表示您希望从具有id=“user_input”但您的只有name=“user_input”的元素中获取值。您必须添加
id=“用户输入”

要发送标题，您需要字典


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\u template\u 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)



从flask导入flask、jsonify、请求、呈现\u模板\u字符串
从LASKU cors进口cors
app=烧瓶（名称）
CORS（应用程序）
@应用程序路径（“/”）
@app.route（'/api/talk'，methods=['POST']）
def index（）：
如果request.method==“POST”：
打印（'form:'，request.form）
打印（'data:'，request.data）
打印（'json:'，request.json）
user\u input=request.json['user\u input']
返回jsonify（{'msg'：'My Answer'}）
其他：
返回渲染模板字符串（“”）
让我们谈谈



发送
函数sendToServer（）{
控制台日志（“单击”）；
$.ajax({
数据：JSON.stringify（{user_input:$（“#user_input”）.val（）}），
类型：“POST”，
url:“http://127.0.0.1:8000/api/talk",
contentType:“应用程序/json”，
标题：{“访问控制允许源”：“*”}，
}).完成（功能（数据）{
控制台日志（数据）；
让用户=$（“#用户输入”）.val（）；
document.getElementById（“userinput”）.innerText=user；
document.getElementById（“botresponse”）.innerText=data.msg；
});
}
''')
如果uuuu name uuuuuu='\uuuuuuu main\uuuuuuu'：
运行（host='127.0.0.1'，port=8000，debug=True，use_reloader=False）

请阅读-总结是，这不是向志愿者讲话的理想方式，可能会对获得答案产生反作用。请不要将此添加到您的问题中。这一行的末尾可能缺少一个星号
标题：“访问控制允许源代码：”，
将其更改为html文件中javascript代码中的
标题：“访问控制允许源代码：”，
。@CAM\u 344这不起作用。请提出其他建议。您的主要问题是
$（“#用户输入”）.val（）
意味着您从具有
id=“用户输入”
但您的
只有
name=“用户输入”