JS Fetch 无法使用 PHP API 后端发布 JSON

Question

I have been trying to connect to my server to send and receive data, but for some reason I can only GET data back, but not POST data. I am using the JS Fetch API, but have also tried using the XMLHttpRequest with similar results. I don't receive any error logs except for the catch error that I create, so any help would be fantastic!

Frontend JS POST Users - Does not Work

function setUsers() {
    const data = new FormData(apiform);
    const value = Object.fromEntries(data.entries());
    console.log(value);

    fetch("../backend/api/user/create.php", {
        method: "POST",
        body: JSON.stringify(value),
        mode: "cors",
        credentials: "same-origin",
        headers: {
           "Content-Type": "application/json"
        }
    })
    .then((response) => {
        if (response.ok) {
            response.json();
        } else {
            throw new Error("Bad Server Response! Response: " + response.status);
        }
    })
    .then((data) => {
        console.log(data);
    })
    .catch((error) => {
        console.error("ERROR: Failed to set users...");
    });

    return false;
}

Backend PHP Create User (AKA create.php. This is what I am calling from the JS side.)

<?php
  header('Access-Control-Allow-Origin: *');
  header('Content-Type: application/json');
  header('Access-Control-Allow-Methods: POST');
  header("Access-Control-Allow-Credentials: true");
  header('Access-Control-Allow-Headers: Access-Control-Allow-Headers,
                                        Access-Control-Allow-Credentials,
                                        Content-Type,
                                        Access-Control-Allow-Methods,
                                        Authorization,
                                        X-Requested-With');

  include_once '../../config/Database.php';
  include_once '../../models/User.php';

  $database = new Database();
  $db = $database->connect();

  $user = new User($db);

  $data = json_decode(file_get_contents("php://input"));

  $user->username = $data->username;
  $user->password = $data->password;
  $user->email = $data->email;

  if($user->createUser()) {
    echo json_encode(
      array('message' => 'User Created')
    );
  } else {
    echo json_encode(
      array('message' => 'User Not Created')
    );
  }
?>

Backend PHP User class

<?php
    class User {
        private $conn;
        private $table = 'users';
        public $id;
        public $username;
        public $password;
        public $email;

        public function __construct($db) {
            $this->conn = $db;
        }

        public function getAllUsers() {
            $query = 'SELECT * FROM ' . $this->table . ' ORDER BY username ASC;';
            $stmt = $this->conn->prepare($query);
            $stmt->execute();

            return $stmt;
        }

        public function createUser() {
            $query = 'INSERT INTO ' . $this->table . ' SET username = :username, 
                                                           password = :password, 
                                                           email = :email';
            $stmt = $this->conn->prepare($query);

            $this->username = htmlspecialchars(strip_tags($this->username));
            $this->password = htmlspecialchars(strip_tags($this->password));
            $this->email = htmlspecialchars(strip_tags($this->email));

            $stmt->bindParam(':username', $this->username);
            $stmt->bindParam(':password', $this->password);
            $stmt->bindParam(':email', $this->email);

            if ($stmt->execute()) {
                return true;
            } else {
                printf("ERROR: %s.\n", $stmt->error);
                return false;
            }
        }
?>

UPDATE: I have tried to use async and await thinking I was using fetch wrong, but that still didn't work. I am beginning to think the problem is more on the apache server side, though I am not sure why because GET works.

Answer 1

Found a simple solution and forgot to actually put it on here, but the answer is to add an event object to the frontend JS then use the prevent default function to stop the default handling of forms and prevents the page from refreshing for FireFox, Safari and the like. So it looks like this:

function setUser(event) {
    event.preventDefault();
    ...
    console.log("Everything else started working...");
}

Note: This worked on Chrome with AND without this event object.

Answer 2

Try to add Content-Type: application/json for header

<?php
$data = array("a" => "Apple", "b" => "Ball", "c" => "Cat");
header("Content-Type: application/json");
echo json_encode($data);

Result will be in JSON as you need: