i just working for a project called “automatic face attendance system” that will detect users face, show information about the user, and save the captured image to local server.

the process is like:
user scan using webcam -> system matching user scanned face using models -> get the userdata using json -> save the captured image to server using json.

the problem is, i’ve turned on SSL from laragon and use HTTPS to improve the performance of my project, and everything is work except the function that “save the captured image”
but, if i turn off the SSL and use HTTP only, the “save the captured image” is working properly, it will save the captured images to server storage.

here is the codes:
js:

async function saveImageToServer(imageBlob, label) {
    const formData = new FormData();
    formData.append("image", imageBlob, "capturedImg.png");
    formData.append("label", label);

    try {
        const response = await fetch("/api/saveImage", {
            method: "POST",
            headers: {
                "CSRF-TOKEN": csrfToken,
            },
            body: formData,
        });

        if (response.ok) {
            const data = await response.json();
            if (data.imageUrl) {
                displayImageOnCanvas(data.imageUrl);
                console.log("Image saved and displayed on canvas");
            } else {
                console.error("Response did not contain imageUrl:", data);
            }
        } else {
            const errorData = await response.json();
            console.error("Failed to save image:", errorData);
        }
    } catch (error) {
        console.error("Error saving image:", error);
    }
}

controller

 public function storeImage(Request $request)
    {
        if ($request->hasFile('image') && $request->input('label')) {
            $timestamp = getCurrentDate();
            Session::put('current_date', $timestamp);

            $image = $request->file('image');
            $kodePegawai = $request->input('label');

            // Ensure the upload directory exists
            $uploadDir = 'labels/' . $kodePegawai . '/capturedImg/';
            Storage::disk('public')->makeDirectory($uploadDir);

            $imageName = $kodePegawai . $timestamp . '.png';

            $path = $image->storeAs($uploadDir, $imageName, 'public');

            if ($path) {
                $imageUrl = asset('storage/' . $uploadDir . $imageName);
                return response()->json(['imageUrl' => $imageUrl]);
            } else {
                return response()->json(['error' => 'Backend failed to save image'], 500);
            }
        } else {
            return response()->json(['error' => 'No image or label received'], 400);
        }
    }

result:

POST https://indodacin.test/api/saveImage 419
saveImageToServer @ script.js:261
(anonymous) @ script.js:197
setInterval
startFaceDetection @ script.js:142
await in startFaceDetection
(anonymous) @ script.js:59Understand this error
script.js:282 Error saving image: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

ive tried many solution from others thread, ask GPT what’s wrong. and all of their solution doesnt work.
here is what ive tried:

1. check and update storage permission
2. validating csrf token
3. use path that have been specified on the server storage, etc