POST方法在被请求时不断发送400个错误

如何解决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>

解决方法

可能是因为您的视图未返回响应。试试：

@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()

您也有2个submits发生。试试这个：

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