PHP 脚本正在创建一个空行以及所需的行

Question

目前使用 React 作为前端，使用 php 作为后端，并使用 XAMPP/Apache。当我使用 fetch API 发送 POST 时，它会在我的表中创建两行，一行为空，另一行包含正确的详细信息。我已经验证js函数只运行一次（严格模式不是问题），并验证php代码运行两次。我对 php 和 fetch 相当陌生，并且不知道为什么会发生这种情况。

第一次运行时第一行制作不正确，不知道如何。第二是正确的。

注册.php：

<?php
require_once('cors.php');
require_once('db_connection.php');

$data = json_decode(file_get_contents('php://input'), true);

$username = $data['username'];
$email = $data['email'];
$password = $data['password'];

$street = $data['street'];
$state = $data['state'];
$country = $data['country'];

$fname = $data['fname'];
$lname = $data['lname'];
$phone_number = $data['phone'];

$hashed_password = password_hash($password, PASSWORD_DEFAULT);

error_log(print_r($country, TRUE)); // prints twice
$sql = "INSERT INTO User (Email, `Password`, Street, `State`, Country, `First Name`, `Last Name`, `Phone Number`, Username)
 VALUES ('$email', '$hashed_password', '$street', '$state', '$country', '$fname', '$lname', '$phone_number', '$username')";
$result = $conn->query($sql);

if ($result === TRUE) {
    echo json_encode(array("success" => "Account Created Successfully"));
} else {
    echo json_encode(array("error" => "There was an error in your submission"));
}

$conn->close();
?>

register.jsx 摘录

  const onSubmit = e => {

      e.preventDefault() // only prints once
      console.log('hello')
      if (password === rePassword) {

        fetch('http://localhost/teashop/php/register.php', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
          })
          .then(response => response.json())
          .then(data => {
            
            if ('success' in data) {
              setDisplay('login');
            }
          })
          .catch(error => {
            console.error('Error fetching products:', error);
          }
        );

Answer 1

由于一些评论，我已经解决了我的问题。我的 php 脚本没有处理预检。

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    require_once('cors.php');
    exit;
}

按上述方式使用 Cors 预检退出可防止创建空表。我还将致力于正确清理用户输入。