
这篇文章只讲本项目里“HTTP状态查询”工具的功能 JavaScript 实现。它的目标很明确：用户输入一个网址后，返回当前状态码、重定向链路、响应头、页面标题、IP 和耗时等信息。

> 在线工具网址：[https://see-tool.com/http-status-query](https://see-tool.com/http-status-query)  
> 工具截图：  
![工具截图.png](https://developer.qcloudimg.com/http-save/yehe-1342542/6236deee28f1808e7aa747010b981e2a.png)


整个实现可以拆成 4 段：输入规范化、请求触发、服务端逐跳探测、结果整理展示。

## 1）输入先做规范化

这个工具不会直接拿用户原始输入去请求，而是先统一处理：

- 去掉首尾空格和中间多余空白
- 如果没写协议，自动补上 `http://`
- 用 `URL` 构造函数校验格式
- 只允许 `http` 和 `https`

这样做的好处是，像 `example.com`、`https://example.com` 这种输入都能被转换成稳定可请求的地址，非法内容则会被提前拦下。

```js
const normalizeUrl = (value) => {
  const rawValue = String(value || "").trim();
  if (!rawValue) return "";

  const cleaned = rawValue.replace(/\s+/g, "");
  const withProtocol = /^https?:\/\//i.test(cleaned)
    ? cleaned
    : `http://${cleaned}`;

  try {
    const target = new URL(withProtocol);
    if (!["http:", "https:"].includes(target.protocol)) return "";
    return target.toString();
  } catch {
    return "";
  }
};
```

## 2）前端状态围绕“查询过程”设计

前端没有把逻辑拆得很散，而是直接围绕一次查询需要的状态来组织：

- `urlInput`：输入框内容
- `isLoading`：是否正在查询
- `errorMessage`：错误提示
- `resultData`：接口返回的完整结果
- `pendingUrl`：当前准备发送的规范化 URL

结果展示时，再通过计算属性把 `resultData` 拆成页面标题、结果列表和摘要文案。这样界面层只负责渲染，不需要重复处理原始数据。

## 3）服务端核心是“手动接管跳转链”

真正的核心不在于请求一次 URL，而在于把每一跳都查出来。实现上使用循环逐跳请求，并把 `redirect` 设为 `manual`，这样程序不会自动跟随跳转，而是自己读取 `Location`，再决定下一跳。

```js
const isRedirectStatus = (statusCode) =>
  [301, 302, 303, 307, 308].includes(statusCode);

for (let i = 0; i <= MAX_REDIRECTS; i += 1) {
  if (visited.has(currentUrl)) break;
  visited.add(currentUrl);

  const { result, title: pageTitle } = await requestOnce(currentUrl, i + 1);
  results.push(result);

  if (!isRedirectStatus(result.code) || !result.location) {
    break;
  }

  currentUrl = new URL(result.location, currentUrl).toString();
}
```

这里有两个关键点：

- 用 `visited` 记录已经访问过的地址，避免循环跳转
- 用 `new URL(result.location, currentUrl)` 兼容相对跳转地址

所以用户最后看到的不是单个状态码，而是一整条请求链路。

## 4）单次请求会提取多种信息

每请求一跳，都会同时收集一组结构化结果：

- `code` 和 `statusText`
- `contentType`
- `cacheControl`
- `responseDate`
- `server`
- `location`
- `totalTime`
- `head`（原始响应头文本）

耗时的计算方式也很直接：请求前记开始时间，响应结束后减一次时间戳，最后拼成 `123ms` 这种格式。

## 5）页面标题不是直接取字符串，而是先按内容类型解码

如果响应是 HTML，工具还会继续读取正文前一部分内容，用于提取页面 `<title>`。这里有两个步骤：

第一步，先根据 `content-type` 里的 `charset` 选择解码方式；第二步，再从 HTML 里匹配标题标签。

```js
const extractTitleFromHtml = (html) => {
  const match = html.match(/<title[^>]*>([\s\S]*?)<\/title>/i);
  if (!match) return "";
  return match[1].replace(/\s+/g, " ").trim();
};
```

这样即使页面不是 UTF-8，只要响应头里带了字符集，标题也能尽量正确显示。

## 6）IP 和端口信息来自额外解析

HTTP 响应本身不会直接告诉你目标域名解析到了哪个 IP，所以这里额外做了一次域名解析。协议是 `https` 时默认端口记为 `443`，否则记为 `80`。这样结果里除了状态码，还能把访问目标的基础网络信息一起展示出来。

## 7）前端会再做一层结果归纳

查询结果返回后，前端不是机械地把数组打印出来，而是根据最后一个状态码和是否发生重定向，生成更容易理解的摘要：

- 2xx：访问成功
- 3xx 且有跳转：发生重定向
- 4xx：客户端错误
- 5xx：服务器错误

同时还会按状态码给文字加不同颜色，让用户一眼区分成功、跳转和异常结果。

## 8）这套实现的关键点

这个工具的功能 JS，本质上是在做一条清晰的数据链：

`输入 URL -> 规范化 -> 逐跳请求 -> 提取状态与响应头 -> 解析标题/IP/耗时 -> 生成可读结果`

从实现角度看，最关键的不是“发起请求”本身，而是把跳转链、响应头、标题和状态归纳成一份普通用户也能看懂的结果。这也是这个 HTTP状态查询 工具的核心实现思路。


这篇文章只讲本项目里“HTTP状态查询”工具的功能 JavaScript 实现。它的目标很明确：用户输入一个网址后，返回当前状态码、重定向链路、响应头、页面标题、IP 和耗时等信息。

HTTP状态查询 在线工具核心JS实现

本文详解“HTTP状态查询”工具的前端JS实现：支持URL规范化、手动逐跳探测重定向链、提取状态码/响应头/页面标题/IP/耗时等信息，并智能归纳结果。代码清晰，注重用户体验与健壮性。

前端

网络与通信

服务器

2026新春采购季

domain

4核4G3M云服务器 新用户低至38元/年！

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

HTTP状态查询 在线工具核心JS实现-腾讯云开发者社区-腾讯云

HTTP状态查询在线工具核心JS实现

HTTP状态查询在线工具核心JS实现

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

HTTP状态查询 在线工具核心JS实现

HTTP状态查询 在线工具核心JS实现

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

HTTP状态查询在线工具核心JS实现

HTTP状态查询在线工具核心JS实现