jQuery AJAX post method throws 405 (Method Not Allowed) error-CodePudding

I'm new in AJAX and have been learning the functions of jQuery get() and post() methods recently. While the get() method worked smoothly, I've faltered while coming across the post() method, that throws an error saying: "405 (Method not allowed)" every time I try to invoke it.

Using Bootstrap, I have a simple HTML file named get_post.html that has a div, paragraph and button elements each. Using jQuery, on the click event of the button, I'm sending a name and location using post() method to a php file named mypost.php that will process the data and send a string of message back to get_post.html. I want to show the final message in the paragraph element of get_post.html. While trying to achieve this, every time I click on the button, the browser console shows the error message mentioned above. Assuming the problem is somehow related to CORS policy, I must mention that both the get_post.html and the mypost.php files reside in the same folder under the same domain. So how come it's a CORS policy-related error? Moreover, I'm using Node.js http-server localhost to run the get_post.html file. Hence, any issue related to localhost is unlikely too. Besides, I enabled and disabled CORS while running http-server, but of no avail. I also tried using IIS, but the same problem arises there as well.

So, what might be causing the error and how can I get rid of it? As I'm new in AJAX, I'm not much used to the intricacies of it. Most of the online solutions are not related to my scenario; therefore, I couldn't obtain much help from them. Please assist in sorting this out, if possible with a basic-level example.

get_post.html code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

        <!-- jQuery library -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.js"></script>

        <!-- Popper JS -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

        <!-- Latest compiled JavaScript -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

        <title>Document</title>
    </head>
    <body>
        <div >
            <p id="loadedData">This is where data will be loaded from server dynamically.</p>
            <button >Load Data</button>
        </div>
        <script type="text/javascript">
             $(document).ready(function() {
                $(".btnLoad").click(function() {
                    // Fetching data using post() method.
                    $.post("mypost.php", {
                        name: "Firstname Lastname",
                        location: "Countryname"
                    }, function(data, status) {
                        $("#loadedData").html(data);
                        alert(status);
                    });
                });
             });
        </script>
    </body>
</html>

mypost.php code:

<?php
    $name = $_POST["name"];
    $location = $_POST["location"];

    echo "This is ".$name.". I'm from ".$location".";
?>

Thanks & Regards!

CodePudding user response：

[...] throws an error saying: "405 (Method not allowed)" every time I try to invoke it.

You're making a request for a route that doesn't accept the Post method and so it gives an error. Here explains it:

405 Method Not Allowed The HyperText Transfer Protocol (HTTP) 405 Method Not Allowed response status code indicates that the server knows the request method, but the target resource doesn't support this method.

The server must generate an Allow header field in a 405 status code response. The field must contain a list of methods that the target resource currently supports. https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/405

Since you are apparently just using pure PHP with no frameworks or dependencies, you should check which type of request is being received.

$method = $_SERVER['REQUEST_METHOD'];
print_r($method);

If the code above returns something other than POST, you have something blocking Post requests somewhere, try using it without Jquery / Ajax, if it works, it may be the case to send an additional header or a token depending on your configuration.

CodePudding user response：

I found the solution. It was all about the PHP file not supporting the post() method.

Two things helped me zero in on the root of the problem. Firstly, @Teemu stated that Node.js http-server doesn't run php despite serving as a localhost. Secondly, @Macedo_Montalvão mentioned: "405 Method Not Allowed response status code indicates that the server knows the request method, but the target resource doesn't support this method." That intrigued me to install a dedicated PHP server. So, I hosted PHP on Windows with IIS as explained here and here. Thereafter, I hosted my project folder from within IIS and now, the post() method works perfectly and the two pages communicate as well as required.

However, there was a typo in my code. In the mypost.php file, there will be a . after $location at the end of the echo statement, which I overlooked. That was throwing a 500 (Internal Server Error).

Thanks @Teemu and @Macedo_Montalvão for your suggestions and sharing those two invaluable links. Stay well!

Regards!