Fetch API Sends Form Data to Flask Backend, Resulting in 400 (Bad Request) Error

I’m developing a web application with Flask for the backend and JavaScript for the frontend. I’m encountering an issue where form data sent from the frontend using the Fetch API to my Flask backend is resulting in a 400 (Bad Request) error. Despite this error, nothing is being logged on the server side.

Here’s a simplified example of my code:

Backend (Flask):

@app.route('/join', methods=['POST'])
def join():
    username = request.form['username']
    password = request.form['password']
    # Process username and password

Frontend (JavaScript):

document.getElementById("join-button").addEventListener("click", function() {
    fetch('/join', {method: 'POST',headers: {'Content-Type': 'application/json'}})
});

Despite sending the form data correctly from the frontend, I’m consistently receiving a 400 (Bad Request) error. What could be causing this issue? Why is nothing being logged on the server side despite the error? How can I troubleshoot and resolve this problem?