直接在 fetch() 的 method 选项中指定 "HEAD" 即可，无需请求体或响应解析；HEAD 请求不支持 body，但可设 headers；响应头含 Content-Length 等元数据，可通过 response.headers.get() 获取；跨域需服务端显式允许 HEAD 方法并配置 CORS。
直接在 fetch() 的 method 选项中指定 "HEAD" 即可，不需要额外配置请求体或响应解析逻辑。
使用 method: "HEAD" 发起请求
Fetch API 原生支持 HEAD 方法，只需在 init 对象中明确设置 method: "HEAD"。注意：HEAD 请求不能携带请求体（如 body），否则会报错。
- 确保不传
body、json或任何可能触发请求体的选项 - 可以正常设置
headers（如认证 token、Accept 等），但服务端是否返回对应元数据取决于其实现 - 响应状态码和响应头（
response.headers）可直接读取，但response.body为空
读取响应头中的元数据
HEAD 请求的目的是获取响应头信息，比如 Content-Length、Last-Modified、ETag、Content-Type 等。这些可通过 response.headers.get() 或遍历获取：
-
response.headers.get("content-length")返回字符串，需用parseInt()转为数字 -
response.headers.has("etag")可判断某字段是否存在 - 用
response.headers.forEach((value, name) => {...})遍历所有头字段（注意大小写不敏感）
处理跨域与 CORS 限制
若目标资源跨域，服务端必须在响应头中显式允许 HEAD 方法（Access-Control-Allow-Methods: GET, HEAD），且预检请求（OPTIONS）需通过。常见问题：
立即学习“Java免费学习笔记（深入）”；
- 浏览器自动发出 OPTIONS 预检，若服务端未正确响应，HEAD 请求会被拦截
- 某些 CDN 或静态托管服务默认支持 HEAD；但自建后端需主动配置 CORS 支持
- 若遇到
No 'Access-Control-Allow-Origin' header错误，说明服务端未授权当前源发起 HEAD 请求
完整示例代码
以下是一个安全、可复用的 HEAD 请求封装：
async function fetchHead(url, options = {}) {
const response = await fetch(url, {
method: "HEAD",
headers: options.headers || {},
credentials: options.credentials || "same-origin"
});
if (!response.ok) {
throw new Error(`HEAD failed: ${response.status} ${response.statusText}`);
}
return {
status: response.status,
url: response.url,
headers: Object.fromEntries(response.headers.entries()),
size: parseInt(response.headers.get("content-length") || "0", 10),
lastModified: response.headers.get("last-modified"),
etag: response.headers.get("etag")
};
}
// 使用示例
fetchHead("/api/data.json")
.then(meta => console.log(meta))
.catch(err => console.error(err));
