XMLHttpRequest() POST 返回 405 错误；不允许的方法答案

【问题标题】：XMLHttpRequest() POST returns 405 error; method not allowedXMLHttpRequest() POST 返回 405 错误；不允许的方法
【发布时间】：2021-04-05 17:55:59
【问题描述】：

我的html代码：

    <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>

我的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)"
}

我正在 Visual Studio 代码编辑器中执行我的代码，我的项目位置在：

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

这是错误：

不仅如此，我还尝试过使用 Fetch API，但它也会引发同样的错误。现在我该怎么做？我怎样才能让它发挥作用？

【问题讨论】：

您应该配置您的开发服务器以允许方法和 POST 请求。检查此 Q/A Jquery Ajax request to an static html resource in Nginx causes a “405 Not Allowed”。

标签： javascript php html xampp http-status-code-405

【解决方案1】：

错误不在 JS 中，它来自服务器。 database_registration.php 中有什么内容？如果没有处理POST，那么我希望服务器返回405。

404 表示database_registration.php 不存在，但405 表示它存在，但不允许POST 专门。检查响应中的allow 标头以了解支持的方法。

试试：

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

改为发出GET 请求。

另外，这可能是解析发布的内容时出错（误报，因为它应该是 400 或者可能是 406），尝试删除正文的部分以查看它是否适用于子集。

【讨论】：

【解决方案2】：

我已经为你完成了第一个复选框（ID 号）。

<!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>

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。
这个问题是关于XMLHttpRequest AJAX POST，而不是你建议的普通 POST。 -1

【解决方案3】：

您的代码看起来不错。如果你使用Live Server vscode 扩展来运行你的代码，这是一个已知的issue（和here）扩展。

您可以尝试按照上面链接中的建议更改 Live Server 扩展上的端口号设置，但最好的办法是停止使用 Live Server 来运行此代码。

只需启动 XAMPP 并在浏览器中导航到正确的 url（请注意，您必须将项目文件夹名称中的空格消除为 stack-hack-20-20 之类的名称）。

编辑：其他一些 vscode 扩展似乎也是如此。当您尝试到达端点时，您会收到 405 状态。使用 GET、HEAD 或 OPTIONS http 方法有一些限制，因此您可以使用其中一种方法访问端点，或者使用 XAMPP 等网络服务器进行 POST、DELETE 等。

【讨论】：

【解决方案4】：

我同意@Keith 的观点，这个错误代码通常表明服务器不允许您使用的请求方法，但我发现并非所有开发人员在每种情况下都使用正确的错误代码。

我怀疑您提交的数据的后端可能存在解析问题，因为它在发送之前没有经过 URI 编码。

试试这个 JavaScript，看看你是否得到不同的结果：

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);

}

【讨论】：

【解决方案5】：

尝试在您的后端 PHP 应用程序上创建支持 POST 请求的新 url 端点。因此，您从 javascript 发送的 HTTP 请求可以使用 POST 请求。

【讨论】：