Question

我从YouTube的Codeside Academy视频中获得了这段代码。为他工作得很好，但是我遇到了问题。控制台错误：

    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)

and 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>

server.py与Postman正常工作，直到我将.json更改为.form以便集成API。

Answer 1

错误KeyError: 'user_input'表示您尝试获取form["user_input"]，但"user_input"中没有form-可能是浏览器没有发送它-例如，如果您获取{{ 1}}请求，则可能没有。

您可以检查GET来了解print(request.form)的内容

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

'user_input'

或者您应该先获取密钥，然后在没有密钥的情况下发送不同的内容

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

顺便说一句：

今天HTML range slider to Flask with AJAX call的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表示您想从具有$("#user_input").val()的元素中获取值，但是您的id="user_input"仅具有<input>的元素。您必须添加name="user_input"。

要发送标题，您需要词典

id="user_input"

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

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

然后必须使用data: JSON.stringify({ user_input: $("#user_input").val() }),而不是`request.form

request.json

最小的工作示例。

我使用user_input = request.json['user_input']将所有代码放在一个文件中-这样每个人都可以简单地运行它。

render_template_string

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

1 个答案: