XMLHttpRequest() POST returns 405 error; method not allowed

Question

My html code:

    <h2>Please finalize your details</h2>
    <form id="details" method="post" class="form">

        Full name: <strong name="name_1">ABCDEF</strong><br><br>
        ID No:<strong name="org_number_1">123</strong><br><br>
        Mobile No:<strong name="ph_number_1"">1234567890</strong><br><br>
        
        E-mail: <strong name="email_1">ABC@DEF.COM</strong><br><br>
        ID Card: <img src="profile.png" alt="preview" name="image" style="width: 100px; height: 100px;"><br><br>

        <button id="go">It's correct</button>
        
    </form>

My javascript:

document.getElementById('go').addEventListener('click', submit);
function submit(){

    var nme=document.getElementsByName("name_1")[0].innerHTML;
    var id=document.getElementsByName("org_number_1")[0].innerHTML;
    var phone=document.getElementsByName("ph_number_1")[0].innerHTML;
    var email=document.getElementsByName("email_1")[0].innerHTML;
    var img=document.getElementsByName("image")[0].src;

    const xhr=new XMLHttpRequest();

    xhr.onload=function(){

        const serverResponse=document.getElementById("response");
        serverResponse.innerHTML=this.responseText;
    };

    xhr.open("POST", "database_registration.php");
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send("name="+nme+"&id="+id+"&phone="+phone+"&email="+email+"&img="+img); //this line throws the error "Failed to load resource: the server responded with a status of 405 (Method Not Allowed)"
}

I am executing my code in Visual Studio Code editor and my project location is in:

C:\Users\Abhishek\Desktop\Web-dev stuff\XAMPP\htdocs\Stack hack 20 20

This is the error:

Not only that, I've also tried working with Fetch API, but it throws the same error too. What do I do now? How can I make it work?

You you should configure your development server to allow methods and POST requests. Check this Q/A [Jquery Ajax request to an static html resource in Nginx causes a “405 Not Allowed”](https://stackoverflow.com/questions/64809260/jquery-ajax-request-to-an-static-html-resource-in-nginx-causes-a-405-not-allowe). — Christos Lytras, Jan 16 '21 at 13:28

Keith · Answer 1 · 2021-01-20T13:57:41.230

The error is not in the JS it's come from the server. What is in database_registration.php? If that doesn't have handling for POST then I'd expect the server to return 405.

404 would mean database_registration.php isn't there, but 405 means it is there, but doesn't allow POST specifically. Check the allow header on the response for the methods that are supported.

Try:

    xhr.open("GET", "database_registration.php?" + 
        "name="+nme+"&id="+id+"&phone="+phone+"&email="+email+"&img="+img);
    xhr.send();

To make a GET request instead.

Alternatively this could be an error parsing the posted content (misreported, as it should be 400 or maybe 406), try removing parts of the body to see if it works with a subset.

score 0 · Answer 2 · answered Dec 29 '20 at 02:53

I have done the first checkbox (ID No) for you.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cafteria details</title>
    
    <style>
        #special{
            height: 100px;
            width: 100px;
            border: 1px solid;
            display: none;
        }
    </style>
</head>
<body>
    <h2>Cafeteria registration</h2>
    <form class="details">
        Full name: <input type="text" placeholder="Please avoid any kind of prefixes" id="name" size=25><br><br>
        Organization:<div id="org"><input onclick="myFunction()" type="checkbox" id="cb1">ID no: <input type="number" id="org_number"><br><br>
                     <input type="checkbox" id="cb2">Mobile No: <input type="tel" id="ph_number"></div><br><br>
        
        E-mail: <input type="email" id="email" size=25><br><br>
        Upload ID Card: <input type="file" name="id" accept=".pdf,.jpeg" id="img"><br><br>
        
    </form>
    <div id ="special">

    </div>
    <button id="button">Register</button>
    
</body>
<script>


function myFunction() {
  var x = document.getElementById("cb1").checked;
  if (x == true) {
    document.getElementById("special").style.display="block";
  }else{
    document.getElementById("special").style.display="none";
  }
  
}

// var x = document.getElementById("cb1").checked;
//     if (x==true){
//     document.getElementById("special").style.display="block";
//     console.log(true)
// }
// if (document.getElementById("cb2").checked==true){
//     document.getElementById("special").style.display="block";
//     console.log(false)
// }
</script>
</html>

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. — ppwater, Jan 16 '21 at 07:47
This question is regarding `XMLHttpRequest` AJAX POST and not plain POST as you suggesting. -1 — Christos Lytras, Jan 16 '21 at 13:23

Anthony · Answer 3 · 2021-01-17T05:47:39.470

Your code looks fine. If you are using Live Server vscode extension to run your code, this is a known issue (and here) with the extension.

You could try to change the port number settings on the Live Server extension as suggested in the link above but your best bet would be to stop using Live Server to run this code.

Just start XAMPP and navigate to the right url in your browser (note you will have to eliminate spaces in your project folder name to something like stack-hack-20-20).

EDIT: It also seems to be the case with some other vscode extensions. You get a 405 status when you try to reach an endpoint. There is some restriction to using GET, HEAD or OPTIONS http methods so you either hit the endpoint using one of those methods or use a webserver like XAMPP for POST, DELETE etc.

score 0 · Answer 4 · answered Jan 22 '21 at 18:38

I agree with @Keith that this error code usually indicates that the request method you used is not allowed by the server, but I've seen that not all developers use the correct error codes in every case.

I suspect you may have a parsing issue on the backend for the data you're submitting, since it isn't being URI encoded before it's sent.

Try this JavaScript instead and see if you get a different result:

document.getElementById('go').addEventListener('click', submit);
function submit() {

    const formData = new FormData();

    formData.append("name", document.getElementsByName("name_1")[0].innerHTML);
    formData.append("id", document.getElementsByName("org_number_1")[0].innerHTML);
    formData.append("phone", document.getElementsByName("ph_number_1")[0].innerHTML);
    formData.append("email", document.getElementsByName("email_1")[0].innerHTML);
    formData.append("img", document.getElementsByName("image")[0].src);

    const xhr = new XMLHttpRequest();

    xhr.onload = function() {
        const serverResponse = document.getElementById("response");
        serverResponse.innerHTML = this.responseText;
    };

    xhr.open("POST", "database_registration.php");
    xhr.send(formData);

}

score 0 · Answer 5 · answered Jan 22 '21 at 21:35

0

Try to create new url endpoint that support POST request on your backend PHP application. So your HTTP request which is sent from javascript can use POST request.

answered Jan 22 '21 at 21:35

starlight93

101
1
6

XMLHttpRequest() POST returns 405 error; method not allowed

5 Answers5