CODEWITHSUNDEEP
pythonflaskserver
Jaguar-515
Jaguar-515

Reputation: 108

POST method keeps on sending 400 errors when being requested

I have been currently working with Flask & MongoDB for experimenting around with a small application. I'm currently having the user get all of the laws in a MongoDB collection and create a new law via a POST method to the MongoDB collection by sending JSON to the server.

However, the output below shows that sending a POST request to /post/law will send out a 400 error.

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 -

I've been a bit confused about why this error is happening. I know that 400 errors are usually connected to bad requests, however, I'm not sure where the bad request error is happening?

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

Client-side:

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

Upvotes: 0

Views: 1417

Answers (1)

GAEfan
GAEfan

Reputation: 11370

Could be because your view does not return a response. Try:

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

Also, your URL is malformed. Should be:

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

And, why all the async calls? The only thing that should be async is your fetch()

You also have 2 submits occurring. Try this:

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

Upvotes: 2

Related Questions