React中通过Axios发送DELETE请求无法删除PHP数据库条目

前端代码问题及修复 #

1. Axios DELETE请求参数格式错误
   Axios的delete方法第二个参数是配置对象，请求体需要放在data字段中，而非直接传FormData。另外当前代码未等待请求完成就跳转，可能导致请求被中断。

修改后的前端代码：

async function Delete() {
    try {
        // 直接发送selected数组作为JSON，比FormData更简洁易解析
        await axios.delete(url, {
            data: selected
        });
        navigate(`/`);
    } catch (error) {
        console.error('删除失败:', error);
        // 可在此添加用户提示，比如弹出错误信息
    }
}

后端代码问题及修复 #

1. 请求体解析方式错误
   原代码用parse_str解析php://input，但该方法仅适用于URL编码的表单数据，无法解析FormData的multipart格式。改用JSON解析更适配前端发送的数组数据。
2. 循环逻辑错误
   原循环条件for ($i = 0; $_DELETE; $i++)会无限循环，因为非空数组始终为true，直到访问不存在的索引导致报错，且无错误处理。
3. SQL注入风险
   直接将$sku拼入SQL语句存在注入风险，需使用预处理语句绑定参数。
4. 缺失错误处理与响应返回
   未处理数据库连接、语句执行错误，也未向前端返回状态码与响应信息。

修改后的后端代码：

header('Access-Control-Allow-Origin: http://localhost:3000');
header("Access-Control-Allow-Methods: GET, POST, DELETE");
header("Access-Control-Allow-Headers: Content-Type"); // 允许JSON请求头
$servername = "localhost";
$username = "root";
$password = "";
$conn = new mysqli($servername, $username, $password, 'commerce');

// 检查数据库连接
if ($conn->connect_error) {
    http_response_code(500);
    echo json_encode(['error' => '数据库连接失败: ' . $conn->connect_error]);
    exit;
}

$method = $_SERVER['REQUEST_METHOD'];
switch ($method) {
    case "DELETE":
        // 解析JSON格式的请求体
        $data = json_decode(file_get_contents("php://input"), true);
        if (!$data || !is_array($data)) {
            http_response_code(400);
            echo json_encode(['error' => '无效的请求数据']);
            exit;
        }

        // 准备预处理删除语句
        $deleteStmt = $conn->prepare("DELETE FROM baseinfos WHERE sku = ?");
        if (!$deleteStmt) {
            http_response_code(500);
            echo json_encode(['error' => '预处理语句创建失败: ' . $conn->error]);
            exit;
        }
        $deleteStmt->bind_param("s", $sku); // 绑定字符串类型参数

        // 遍历数组执行删除
        foreach ($data as $sku) {
            $deleteStmt->execute();
            if ($deleteStmt->error) {
                http_response_code(500);
                echo json_encode(['error' => '删除SKU失败: ' . $deleteStmt->error]);
                $deleteStmt->close();
                $conn->close();
                exit;
            }
        }

        $deleteStmt->close();
        http_response_code(200);
        echo json_encode(['message' => '选中条目删除成功']);
        break;
    default:
        http_response_code(405);
        echo json_encode(['error' => '不允许的请求方法']);
        break;
}

$conn->close();

调试建议 #

• 前端：打开浏览器开发者工具的Network标签，查看DELETE请求的Payload，确认数据是否正确发送。
• 后端：可在解析请求体后添加var_dump($data)，检查是否接收到正确的数组数据。

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