http HEAD request returns blank without a response

My HTTP GET request works perfectly, returning body data and response headers. The exact same request with the extra paramter , { method: "HEAD" } as per the docs returns empty. Server side I can see there was a sucessful HEAD request that was returned with a status 200.

        async function getHead() {
            const url = document.getElementById('url').value;
            if(url.slice(0, 4) != 'http') {
                alert("URL must start with http or https!")
                document.getElementById("responseCode").innerHTML = "ERROR"
                document.getElementById("responseBody").innerHTML = ""
            };
            try {
                const response = await fetch(url, { method: "HEAD" });
                if (!response.ok) {
                throw new Error(`Response status: ${response.status}`);
            }

            const json = await response.json();
            console.log(json);
            console.log(response);
            document.getElementById("responseCode").innerHTML = response.status;
            document.getElementById("responseBody").innerHTML = JSON.stringify(json);
            } catch (error) {
                console.error(error.message);
                document.getElementById("responseBody").innerHTML = error.message;
            }
        }

I’m expecting a response exactly the same as the GET fetch but without the body, but I’m just getting ‘Unexpected end of JSON input’ (empty)?

Full HTML & JS here