HTTP HEAD请求仅返回Headers原型而非实际响应头问题咨询

HTTP GET请求能正常返回响应体和响应头，但添加{ method: "HEAD" }发起相同请求时，控制台仅输出Headers的原型而非实际响应头；服务器端显示该HEAD请求已成功返回200状态码，期望得到与GET请求一致的响应头（无响应体）但未实现。

相关代码 #

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}`);
    }

    console.log(response.headers.entries());
    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;
    }
}

解决方法 #

• response.headers.entries()返回的是迭代器对象，浏览器控制台直接打印时只会显示原型结构，需要转换成数组才能看到实际响应头条目，比如使用Array.from(response.headers.entries())或者展开运算符[...response.headers.entries()]。也可以直接打印response.headers对象，控制台会展示可展开的完整结构。
• 原代码中JSON.stringify(json)的json变量未定义，且HEAD请求本身没有响应体，这里应该替换为提示文本或留空。

修正后的代码 #

async function getHead() {
    const url = document.getElementById('url').value;
    if(url.slice(0, 4) !== 'http') {
        alert("URL必须以http或https开头!")
        document.getElementById("responseCode").innerHTML = "ERROR"
        document.getElementById("responseBody").innerHTML = ""
        return; // 终止后续执行，避免进入try块
    };
    try {
        const response = await fetch(url, { method: "HEAD" });
        if (!response.ok) {
            throw new Error(`响应状态码: ${response.status}`);
        }

        // 转换迭代器为数组后打印，查看实际响应头
        console.log(Array.from(response.headers.entries()));
        // 直接打印headers对象，控制台可展开查看
        console.log(response.headers);
        document.getElementById("responseCode").innerHTML = response.status;
        // HEAD请求无响应体，设置对应提示
        document.getElementById("responseBody").innerHTML = "HEAD请求无响应体";
    } catch (error) {
        console.error(error.message);
        document.getElementById("responseBody").innerHTML = error.message;
    }
}

内容的提问来源于stack exchange，提问作者Ben Jones