vue3前端代码无法提交到后端php怎么办？

Question

vue3前端代码无法提交到后端php怎么办，php一直返回undefined和乱码 ，我wampserver打开php也是乱码，定义的post变量undefined
php代码如下

<?php
header('Content-Type: application/json');
header('Content-Type: application/json');
header("Access-Control-Allow-Origin: http://localhost:8083");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Authorization");
$studentId = $_POST['id'];
$password = $_POST['code'];

// 连接数据库
$mysqli = new mysqli("localhost", "root", "", "activity",3308);

if ($mysqli->connect_error) {
    die("连接失败: " . $mysqli->connect_error);
}

// 查询用户
$query = "SELECT * FROM users WHERE id = ? AND code = ?";
$stmt = $mysqli->prepare($query);
$stmt->bind_param("ss", $studentId, $password);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows > 0) {
    echo json_encode(array("success" => true));
} else {
    echo json_encode(array("success" => false, "message" => "用户名或密码错误"));
}

$mysqli->close();
?>

vue登录部分如下

function login() {
  console.log('登录', loginForm.value);
  axios.post('http://localhost:8080/kyz/login.php', loginForm.value)
    .then(response => {
      if (response.data.success) {
        isAuthenticated.value = true;
        router.push('/activity');
      } else {console.log('登录', response.data);
        alert('登录失败: ' + response.data.message);
      }
    })
    .catch(error => {
      console.error('登录请求失败', error);
      alert('登录请求失败');
    });
}

怎么试都不行

Answer 1

没看到乱码，都是很清晰的错误信息。

建议：

1. 解决所有 Error，尤其是 Fatal error。目测是你 register.php 里插入表时，没有给 id，id 估计也没设置自增之类的属性，所以报错了。
2. 尽可能解决所有 Warning
3. 认真阅读错误日志，不要再把命令行输出叫“乱码”。

Answer 2

我把你的代码调整了一下

php

<?php
header('Content-Type: application/json');
header("Access-Control-Allow-Origin: http://localhost:8083");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Authorization");

$studentId = $_POST['id'];
$password = $_POST['code'];

// 连接数据库
$mysqli = new mysqli("localhost", "root", "", "activity", 3308);

if ($mysqli->connect_error) {
    die(json_encode(array("success" => false, "message" => "连接失败: " . $mysqli->connect_error)));
}

// 查询用户
$query = "SELECT * FROM users WHERE id = ? AND code = ?";
$stmt = $mysqli->prepare($query);
$stmt->bind_param("ss", $studentId, $password);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows > 0) {
    echo json_encode(array("success" => true));
} else {
    echo json_encode(array("success" => false, "message" => "用户名或密码错误"));
}

$stmt->close();
$mysqli->close();
?>

vue

function login() {
  console.log('登录', loginForm.value);
  axios.post('http://localhost:8080/kyz/login.php', loginForm.value)
    .then(response => {
      if (response.data.success) {
        isAuthenticated.value = true;
        router.push('/activity');
      } else {
        console.log('登录失败', response.data);
        alert('登录失败: ' + response.data.message);
      }
    })
    .catch(error => {
      console.error('登录请求失败', error);
      alert('登录请求失败');
    });
}