POST方法在被请求时继续发送400个错误。

Question

目前，我一直在使用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>

Answer 1

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

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

另外，您的URL格式错误。应：

 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>