Request Response Differs from Device | PHP, Windows Server, React, MySQL

Question

Details :

• Frontend : React
• API : PHP, FastRoute Library (Don't Judge, But I'm using xampp)
• Database : MySQL ~ Remotely Hosted

The task was to build an application and host it on a network. The system is meant to be only accessible to the local network. Therefore I settled on a simple Domain Controller with DHCP. Everything seems to be working fine. I have set up the DC with DHCP and also configured the inbound rules. The entire application is now accessible via the clients and for the most part works fine.

Local Environment Details :

• Windows 10
• Remote MySQL Database -> Same as Server
• Locally Ran Vite App
• Locally Ran XAMPP

Domain Controller Server Details :

• Windows Server 2022
• Remote MySQL Database
• npm run dev -- --host to host on the network
• XAMPP Configured to host on the network
• Inbound rules on port : 5173 and 80

AD User/Client Details :

Yes, the client can access the webapp. It can almost do everything I can Locally aside from a few things like the given problem

• Windows 10
• Tried With Chrome
• Tried With Edge

The issue :

Local Environment : JSON Data that gets stored in localStorage stay the correct datatype. For example if I say {currPage : 5} then it stays like that.

Server + Client : JSON Data that gets stored in localStorage all becomes string datatype. For example if I say {currPage : 5} then it turns into {currPage : 5}.

I thought that it would be a browser issue, but trying it locally with the same browser as the Client works just fine. DataType doesn't change. Not a big issue since parseInt() fixes it.

Though here comes the important part. A Request like fetching images returns an array with objects when it's done locally. Once I try requesting it from the Client, it returns 0 results. I double checked the payload and it's the exact same data which is to be expected, but the response isn't. I personally am super confused and I have no clue where to begin. Unfortunately the server isn't allowed to stay on since it's at school so I can't test it right now. I'm currently just looking for possible ideas as to what is going wrong.

The Method For Fetching The Images Is this :

 try {
            $base_query = "SELECT * FROM afbeelding WHERE record_id = :record_id && tabelnaam = :tabelnaam";

            $qry = $this->CONN->prepare($base_query);
            $qry->bindParam(":record_id", $record_id);
            $qry->bindParam(":tabelnaam", $tabelnaam);
            $qry->execute();




            if (!$qry->rowCount()) {
                http_response_code(404);
                print_r(json_encode(["message" => "No Results Found"]));
                return;
            }

            $response = $qry->fetchAll(PDO::FETCH_ASSOC);


            print_r(json_encode($response));

        } catch (PDOException $err) {
            print_r(json_encode(["message" => $err]));
            http_response_code(500);
        }

    }

The Payload Looks Like This :

tabelnaam: product
record_id: 1

Locally The Response Returns :

[
  {
    "id": 12,
    "img_url": "image0-1708893712681.png",
    "record_id": 1,
    "tabelnaam": "product"
  },
  {
    "id": 13,
    "img_url": "image1-1708893712685.png",
    "record_id": 1,
    "tabelnaam": "product"
  },
  {
    "id": 14,
    "img_url": "image2-1708893712686.png",
    "record_id": 1,
    "tabelnaam": "product"
  },
  {
    "id": 15,
    "img_url": "image3-1708893712698.png",
    "record_id": 1,
    "tabelnaam": "product"
  },
  {
    "id": 21,
    "img_url": "image0-1709673514264.png",
    "record_id": 1,
    "tabelnaam": "product"
  },
  {
    "id": 22,
    "img_url": "image0-1709673523113.png",
    "record_id": 1,
    "tabelnaam": "product"
  }
]

If I make this same request from the client, I get 'No Results Found' since that is what it's supposed to return if there is no data