使用 axios.post 发送 AJAX Post 请求时错误 405 Method Not allowed答案

【问题标题】：Error 405 Method Not allowed when sending AJAX Post request using axios.post使用 axios.post 发送 AJAX Post 请求时错误 405 Method Not allowed
【发布时间】：2022-09-23 04:08:18
【问题描述】：

在用户选择限制选项和选项后，我正在尝试向 getData.php 文件发送发布请求以检索数据。它应该在用户完成选择后显示一个表格。但是，我的控制台显示 isAxiosError.js:12 POST http://127.0.0.1:5501/wk6/res/ex2/getData.php 405 (Method Not Allowed) 我不确定它为什么会出现，因为我的逻辑似乎是正确的，而且我也使用 MAMP 运行它。非常感谢，如果你能解释给我...

我的 HTML 文件：

<!DOCTYPE html>
<html>
   <head>
      <!-- Bootstrap CSS -->
      <link
         href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css\"
         rel=\"stylesheet\"
         integrity=\"sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx\"
         crossorigin=\"anonymous\"
      />

      <script src=\"https://unpkg.com/axios/dist/axios.min.js\"></script>
   </head>

   <body>
      <div class=\"container\">
         <div class=\"row\">
            <div class=\"col\">
               <h2>Choose an option:</h2>
               <label for=\"limit\">Limit:</label>
               <input id=\"limit\" type=\"number\" min=\"1\" max=\"5\" value=\"1\" />
               <select onchange=\"getData()\" id=\"select\">
                  <option value=\"customers\">Customers</option>
                  <option value=\"products\">Products</option>
                  <option value=\"suppliers\">Suppliers</option>
               </select>
            </div>
         </div>
         <div class=\"row\">
            <div class=\"col\">
               <div id=\"result\"></div>
            </div>
         </div>
      </div>

      <script>
         // HINT: explore https://www.w3schools.com/jsref/dom_obj_table.asp for creating a table

       
         function getData() {
            var type = event.target.value;
            var limit = document.getElementById(\"limit\").value;

         
            var url = \"getData.php\";

            axios.post(url, {
                  type: type,
                  limit: limit,
               })
               .then(response => {
                  console.log(response.data);
                  generateTable(response.data, type);
               })
               .catch(error => {
                  console.log(error.message);
               });
         }

         function generateTable(dataObj, type) {
            var output = \"<h2 class=\'pl-2\'>\" + type + \":</h2>\";
            output += \"<table class=\'mx-2 table table-dark\'><tr>\";

            let item = dataObj.records[0];
            for (let prop in item) {
               output += \"<th>\" + prop + \"</th>\";
            }
            output += \"</tr>\";
            for (let item of dataObj.records) {
               output += \"<tr>\";
               for (let prop in item) {
                  output += \"<td>\" + item[prop] + \"</td>\";
               }
               output += \"</tr>\";
            }
            output += \"</table>\";
            document.getElementById(\"result\").innerHTML = output;
         }
      </script>

      <script
         src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js\"
         integrity=\"sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa\"
         crossorigin=\"anonymous\"
      ></script>
   </body>
</html>

getData.php 文件：

<?php
    header(\"Access-Control-Allow-Origin: *\");
    // data arrays
    $customers = [ 
            [\"name\" => \"Jack\", \"age\" => 30, \"city\" => \"London\"],
            [\"name\" => \"Mary\", \"age\" => 24, \"city\" => \"Paris\"],
            [\"name\" => \"Dan\", \"age\" => 18, \"city\" => \"Prague\"],
            [\"name\" => \"Olav\", \"age\" => 32, \"city\" => \"Moscow\"],
            [\"name\" => \"Billie\", \"age\" => 43, \"city\" => \"Barcelona\"]
    ];

    $products = [ 
            [\"name\" => \"iPhone\", \"price\" => 2049],
            [\"name\" => \"Samsung\", \"price\" => 1699],
            [\"name\" => \"Huawei\", \"price\" => 1499],
            [\"name\" => \"Oppo\", \"price\" => 1199],
            [\"name\" => \"LG\", \"price\" => 1299]
    ];

    $suppliers =  [ 
            [\"name\" => \"Bane\", \"age\" => 35, \"city\" => \"Tokyo\"],
            [\"name\" => \"Joker\", \"age\" => 44, \"city\" => \"Seoul\"],
            [\"name\" => \"Penguin\", \"age\" => 28, \"city\" => \"KL\"],
            [\"name\" => \"Dent\", \"age\" => 38, \"city\" => \"Singapore\"],
            [\"name\" => \"Fish\", \"age\" => 40, \"city\" => \"Jakarta\"]
    ];

    $data = array();
    // default
    $limit = 1; 
    $type = \"customers\"; 
    if (isset($_POST)) {
        $json = file_get_contents(\'php://input\');
        $data = json_decode($json);
        $type = $data->type;
        if (isset($data->limit)) {
            $limit = $data->limit;
        }
    } else {
        $type = $_GET[\'type\'];
        if (isset($_GET[\'limit\'])) {
            $limit = $_GET[\'limit\'];
        }
    }

    if($type == \"customers\") {
        $data = array_slice($customers, 0, $limit);
    } else if($type == \"products\") {
        $data = array_slice($products, 0, $limit);
    } else if($type == \"suppliers\") {
        $data = array_slice($suppliers, 0, $limit);
    }

    $processed_data = [ \"type\" => $type, \"records\" => $data];

    $jsonObj = json_encode($processed_data);
    
    echo $jsonObj;
?>

标签： html ajax axios xmlhttprequest

【解决方案1】：

尝试在您的 CORS 标头中添加允许方法...

访问控制允许方法：*

【讨论】：