跳转到内容
搜索文档

将标头记录到控制台

将请求标头输出到控制台进行调试。

最后更新 查看 MarkdownAgent 设置

如需快速上手,请点击下方按钮。

Deploy to Cloudflare

这会在你的 GitHub 账户中创建仓库,并将应用部署到 Cloudflare Workers。

export default {
	async fetch(request) {
		console.log(new Map(request.headers));
		return new Response("Hello world");
	},
};
export default {
	async fetch(request): Promise<Response> {
		console.log(new Map(request.headers));
		return new Response("Hello world");
	},
} satisfies ExportedHandler;
from workers import WorkerEntrypoint, Response

class Default(WorkerEntrypoint):
    async def fetch(self, request):
        print(dict(request.headers))
        return Response('Hello world')
use worker::*;

#[event(fetch)]
async fn fetch(req: HttpRequest, _env: Env, _ctx: Context) -> Result<Response> {
    console_log!("{:?}", req.headers());
    Response::ok("hello world")
}
import { Hono } from 'hono';

const app = new Hono();

app.get('*', (c) => {
  // Different ways to log headers in Hono:

  // 1. Using Map to display headers in console
  console.log('Headers as Map:', new Map(c.req.raw.headers));

  // 2. Using spread operator to log headers
  console.log('Headers spread:', [...c.req.raw.headers]);

  // 3. Using Object.fromEntries to convert to an object
  console.log('Headers as Object:', Object.fromEntries(c.req.raw.headers));

  // 4. Hono's built-in header accessor (for individual headers)
  console.log('User-Agent:', c.req.header('User-Agent'));

  // 5. Using c.req.headers to get all headers
  console.log('All headers from Hono context:', c.req.header());

  return c.text('Hello world');
});

export default app;

将标头记录到控制台

如需将 Headers 对象记录到控制台,可使用 Map

console.log(new Map(request.headers));

如需快速将 Headers 对象序列化为字符串,可使用展开运算符(spread):

let requestHeaders = JSON.stringify([...request.headers]);

使用 Object.fromEntries 将标头转换为对象:

let requestHeaders = Object.fromEntries(request.headers);

问题

调试 Workers 时,需要检查请求或响应上的标头。常见错误是尝试用如下代码将标头记录到开发者控制台:

console.log(request.headers);

或这样:

console.log(`Request headers: ${JSON.stringify(request.headers)}`);

这两种写法都会显示一个看似空的对象——字符串 "{}"——即使调用 request.headers.has("Your-Header-Name") 可能返回 true。这与浏览器的行为一致。

原因是 Headers 对象不会将标头存储在可枚举的 JavaScript 属性中,因此开发者控制台和 JSON 序列化器无法读取标头的名称和值。它并非真正的空对象,而是一个不透明对象。

Headers 对象是可迭代的,你可以利用这一点编写几行简洁代码来调试打印标头。

通过 Map 传递标头

让 Headers 适合 console.log() 的第一种常见做法,是从 Headers 对象构造 Map 对象并记录该 Map

console.log(new Map(request.headers));

这样做有效,因为:

  • Map 对象可以从可迭代对象(如 Headers)构造。

  • Map 对象会将条目存储在可枚举的 JavaScript 属性中,因此开发者控制台可以查看其内容。

使用展开运算符将标头展开为数组

Map 方法适用于 console.log() 调用。如需将标头序列化为字符串,你会发现对 Map 调用 stringify 只会得到 [object Map]

尽管 Map 将数据存储在可枚举属性中,但这些属性以 Symbol 为键。因此 JSON.stringify()忽略 Symbol 键属性,最终得到空的 {}

另一种做法是利用 Headers 对象的可迭代性,对其应用展开运算符...)。

let requestHeaders = JSON.stringify([...request.headers], null, 2);
console.log(`Request headers: ${requestHeaders}`);

使用 Object.fromEntries 将标头转换为对象(ES2019)

ES2019 提供了 Object.fromEntries,可将标头转换为对象:

let headersObject = Object.fromEntries(request.headers);
let requestHeaders = JSON.stringify(headersObject, null, 2);
console.log(`Request headers: ${requestHeaders}`);

输出类似:

Request headers: {
  "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8",
  "accept-encoding": "gzip",
  "accept-language": "en-US,en;q=0.9",
  "cf-ipcountry": "US",
  // ...
}"

这篇文档对您有帮助吗?