使用axios.post发送AJAX POST请求时遇Error 405 Method Not Allowed问题

核心错误原因 #

你遇到的405错误本质是请求发错了服务器：

• 控制台显示的请求地址http://127.0.0.1:5501/...是VS Code Live Server这类静态文件服务器的端口，这类服务器仅处理静态文件的GET请求，既不支持PHP代码解析，也会直接拒绝POST请求。
• 你虽然启动了MAMP，但HTML页面是通过Live Server打开的，而非MAMP提供的PHP服务端口（默认是8888），导致POST请求根本没进入MAMP的PHP运行环境。

额外代码逻辑问题（影响后续功能） #

你的PHP代码存在一个逻辑漏洞：isset($_POST)永远返回true——因为$_POST是PHP的超全局数组，哪怕没有任何POST数据，它也会存在，这会导致代码里处理GET请求的else分支永远不会执行。如果后续需要兼容GET请求，必须修正这个判断逻辑。

解决步骤 #

1. 调整文件部署路径 #

将HTML和getData.php文件都放到MAMP的htdocs目录下，比如完整路径为：
/Applications/MAMP/htdocs/wk6/res/ex2/

之后通过MAMP的服务地址访问HTML页面，示例地址：
http://localhost:8888/wk6/res/ex2/index.html（假设你的HTML文件名为index.html）

2. 修正PHP的请求处理逻辑 #

替换PHP中原有的请求判断代码，改为基于请求方法区分处理，同时兼容JSON格式的POST数据：

// 替换原有的请求处理代码段
$limit = 1; 
$type = "customers"; 

// 根据请求方法处理参数
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $json = file_get_contents('php://input');
    $data = json_decode($json);
    if ($data) {
        $type = $data->type ?? "customers";
        $limit = $data->limit ?? 1;
    }
} elseif ($_SERVER['REQUEST_METHOD'] === 'GET') {
    $type = $_GET['type'] ?? "customers";
    $limit = $_GET['limit'] ?? 1;
}

3. 优化HTML的getData函数（可选） #

原getData()函数依赖全局event变量，改为传参形式更规范：

<!-- 修改select标签的onchange事件 -->
<select onchange="getData(this)" id="select">

// 修改getData函数
function getData(element) {
    var type = element.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);
        });
}

内容的提问来源于stack exchange，提问作者min hui