首页 > 解决方案 > POST 方法在被请求时不断发送 400 错误

问题描述

我目前一直在使用 Flask 和 MongoDB 来试验一个小型应用程序。我目前正在让用户获取 MongoDB 集合中的所有法律,并通过将 JSON 发送到服务器来通过 POST 方法向 MongoDB 集合创建新法律。

但是,下面的输出显示向 /post/law 发送 POST 请求会发出 400 错误。

127.0.0.1 - - [12/Aug/2020 09:21:50] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [12/Aug/2020 09:21:50] "GET /laws HTTP/1.1" 200 -
127.0.0.1 - - [12/Aug/2020 09:21:54] "POST /post/law HTTP/1.1" 400 -

我对为什么会发生此错误感到有些困惑。我知道 400 错误通常与错误请求有关,但是,我不确定错误请求错误发生在哪里?

# This handles the POST request
@app.route('/post/law', methods = ["POST"])
def post_law():
    if request.is_json:
        content = request.get_json()
        print(content)

客户端:

<!--This tries to send a request to /post/law-->
<h1>Submit a Law</h1>
<form action="", method="GET">
    <div id="law_name_section">
        <label>Name of the law:</label>
        <input type="text" required id="law_name">
    </div>
    <div id="law_description_section">
        <label>Description of the law:</label>
        <input type="text" required id="law_description">
    </div>
    <div id="law_url_section">
        <label>URL to the law:</label>
        <input type="text" required id="law_url">
    </div>
    <input type="submit" value="Submit law" onclick="submitLaw()">
</form>

<script>
// submitLaw() tries to send a request to /post/law in a JSON request
    async function submitLaw() {
        let name = await document.getElementById('law_name').value 
        let description = await document.getElementById('law_description').value 
        let url = await document.getElementById('law_url').value

        let options = {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: {
                name: name,
                description: description,
                url: url,
                status: "Bill"
            }
        }

        let response = await fetch("http://127.0.01:8000/post/law", options)

        if (response.ok) {
            alert("Successfully sent data to /post/law")
        } else {
            alert(`Couldn't send data to /post/law`)
        }
    }
</script>

标签: pythonflaskserver

解决方案


可能是因为您的视图没有返回响应。尝试:

@app.route('/post/law', methods = ["POST"])
def post_law():
    if request.is_json:
        content = request.get_json()
        print(content)
    return "hello"

此外,您的网址格式不正确。应该:

 await fetch("http://127.0.0.1:8000/post/law", options)

而且,为什么所有的async电话?唯一应该是异步的是你的fetch()

你也有 2submits发生。尝试这个:

<!--This tries to send a request to /post/law-->
<h1>Submit a Law</h1>
<form action="", method="POST">
    <div id="law_name_section">
        <label>Name of the law:</label>
        <input type="text" required id="law_name">
    </div>
    <div id="law_description_section">
        <label>Description of the law:</label>
        <input type="text" required id="law_description">
    </div>
    <div id="law_url_section">
        <label>URL to the law:</label>
        <input type="text" required id="law_url">
    </div>
    <input type="button" value="Submit law" onclick="submitLaw();">
</form>

<script>
// submitLaw() tries to send a request to /post/law in a JSON request
    function submitLaw() {
        let name = document.getElementById('law_name').value;
        let description = document.getElementById('law_description').value; 
        let url = document.getElementById('law_url').value;

        let options = {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: {
                name: name,
                description: description,
                url: url,
                status: "Bill"
            }
        }

        let response = await fetch("http://127.0.0.1:8000/post/law", options)

        if (response.ok) {
            alert("Successfully sent data to /post/law")
        } else {
            alert(`Couldn't send data to /post/law`)
        }
    }
</script>

推荐阅读