Why does a POST request have GET parameters in the address bar?

Question

AJAX

There is a form and an ajax request that sends form data to the server in POST format:

<div class="auth-form">
  <input type="text" name="login" placeholder="login" id="login">
  <input type="password" name="password" placeholder="password" id="password">
  <button id="submitBtn">Send</button>
</div>

<script type="text/javascript">
  const submitBtnElem = document.getElementById('submitBtn');

  if(submitBtnElem) {
    submitBtnElem.addEventListener('click', auth);
  }

  function auth() {
    const login = document.getElementById('login').value;
    const password = document.getElementById('password').value;		
    const xhr = new XMLHttpRequest();
    xhr.open("POST", "auth_request", true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function() {
      if (this.readyState != 4) return;
      console.log( this.responseText );
    }
    xhr.send(`login=${login}&password=${password}`);
  }
</script>

After the user fills out the form and clicks the Send button, the request goes to the server. But it doesn't work on the server:


Why it doesn't work doesn't really bother me, I'm primarily concerned about the presence of GET parameters in the address bar:
http://127.0.0.1:5000/?login=&password=

Please help me understand the reason for their appearance. After all, in the ajax request, I specified the POST method and the header:

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

At the same time, the controller of my framework accepts only POST:

@app.route('/auth_request', methods=['POST'])
def auth_request():
  .......

Answer 1

<form method="post" class="auth-form">
  <input type="text" name="login" placeholder="login" id="login">
  <input type="password" name="password" placeholder="password" id="password">
  <button id="submitBtn">Send</button>
</form>

const submitBtnElem = document.getElementById('submitBtn');

  if(submitBtnElem) {
    submitBtnElem.addEventListener('click', auth(e));
  }

  function auth(e) {
e.preventDefault();
    const login = document.getElementById('login').value;
    const password = document.getElementById('password').value;		
    const xhr = new XMLHttpRequest();
    xhr.open("POST", "auth_request", true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function() {
      if (this.readyState != 4) return;
      console.log( this.responseText );
    }
    xhr.send(`login=${login}&password=${password}`);
  }