405 (Method Not Allowed) problem -> POST method

Question

I want to create a form that send an email written by the user, but I get this problem whenever I click the submit button (405 (Method Not Allowed) in console), and I want to show a text from PHP file as a test, I'm using live server and VS code.

HTML:

<form>
  <div class="fields">
    <div class="field">
      <input
        type="text"
        placeholder="Enter your first name"
        name="first-name"
      />
      <i class="fa-solid fa-user"></i>
    </div>

    <div class="field">
      <input type="text" placeholder="Enter your last name" name="last-name" />
      <i class="fa-solid fa-user"></i>
    </div>

    <div class="field">
      <input type="text" placeholder="Enter your Email" name="email" />
      <i class="fa-solid fa-envelope"></i>
    </div>

    <div class="field">
      <input type="text" placeholder="Subject" name="subject" />
      <i class="fa-solid fa-pen"></i>
    </div>
  </div>

  <div class="message">
    <textarea placeholder="write a message" name="message"></textarea>
    <i class="fa-solid fa-message"></i>
  </div>

  <div class="send-button">
    <button type="submit">Send message</button>
    <span>sending your message ...</span>
  </div>
</form>;

JS:

const form = document.querySelector("#contact form");
const statusText = document.querySelector(".send-button span");

form.addEventListener("submit", (e) => {
  console.log("clicked");
  e.preventDefault();
  statusText.style.display = "block";

  let xhr = new XMLHttpRequest();
  xhr.open("POST", "message.php");
  xhr.onload = () => {
    if (xhr.readyState == 4 && xhr.status == 200) {
      let response = xhr.response;
      console.log(response);
    } else {
      console.log("error has been occured");
    }
    console.log(xhr.response);
  };
xhr.send();
});

PHP (message.php):

<?php 
  echo "this text is from PHP";
?>