這篇文章只講本項(xiàng)目里域名DNS查詢(xún)工具的功能 JS 實(shí)現(xiàn)。整個(gè)工具用 Vue 組織交互狀態(tài)，查詢(xún)端走 DoH（DNS over HTTPS），最終把 DNS 記錄整理成可直接展示的表格數(shù)據(jù)。

核心鏈路很簡(jiǎn)單：

輸入域名 -> 規(guī)范化與校驗(yàn) -> 發(fā)起查詢(xún) -> 解析應(yīng)答 -> 渲染記錄

在線工具網(wǎng)址：https://see-tool.com/dns-query
工具截圖：

1）輸入先做規(guī)范化，避免臟數(shù)據(jù)進(jìn)入查詢(xún)

前端不會(huì)直接拿輸入框原值查詢(xún)，而是先做統(tǒng)一處理：轉(zhuǎn)小寫(xiě)、去協(xié)議、去路徑、去端口、去結(jié)尾點(diǎn)。

const normalizeDomain = (value) => {
  const rawValue = String(value || "")
    .trim()
    .toLowerCase();
  if (!rawValue) return "";
  let cleaned = rawValue.replace(/^https?:\/\//i, "");
  cleaned = cleaned.split("/")[0].split("?")[0].split("#")[0];
  if (cleaned.includes(":")) cleaned = cleaned.split(":")[0];
  return cleaned.replace(/\.$/, "");
};

const isValidDomain = (value) => {
  if (!value || !value.includes(".")) return false;
  return /^[a-z0-9.-]+$/i.test(value);
};

這一步把 https://Example.com:443/path 統(tǒng)一成 example.com，后續(xù)請(qǐng)求參數(shù)會(huì)穩(wěn)定很多。

2）前端狀態(tài)圍繞“一次查詢(xún)”組織

在 Vue 里，核心狀態(tài)包括：

• domainInput：用戶(hù)輸入
• recordType：記錄類(lèi)型（默認(rèn) 1，即 A）
• dohServer：DoH 服務(wù)商（默認(rèn) alidns）
• isLoading：查詢(xún)中狀態(tài)
• resultRecords、resultDomain：結(jié)果數(shù)據(jù)

觸發(fā)查詢(xún)時(shí)會(huì)先清空舊結(jié)果，再發(fā)請(qǐng)求；請(qǐng)求完成后根據(jù)返回值決定展示記錄表格還是“無(wú)記錄”提示。Enter 鍵和按鈕點(diǎn)擊共用同一套查詢(xún)函數(shù)，交互邏輯保持一致。

3）服務(wù)端對(duì)域名再做一次標(biāo)準(zhǔn)化和校驗(yàn)

后端會(huì)再次處理輸入，保證接口層數(shù)據(jù)安全、可控。這里做了兩件事：

1. 允許傳入帶協(xié)議或帶路徑的字符串，并用 URL 做兜底解析
2. 校驗(yàn)域名格式，不合法直接返回錯(cuò)誤

同時(shí)接口只接受 POST，并把錯(cuò)誤按類(lèi)型轉(zhuǎn)成明確的狀態(tài)碼，前端可以直接按 message 展示。

4）DoH 查詢(xún)的核心是“服務(wù)映射 + 類(lèi)型映射”

工具內(nèi)部先定義兩張映射表：

• DoH 服務(wù)商映射：alidns、dnspod、360、google、cloudflare
• DNS 類(lèi)型映射：1(A)、28(AAAA)、5(CNAME)、16(TXT)、2(NS)、6(SOA)

查詢(xún)時(shí)先檢查映射是否存在，不存在直接拋出 INVALID_DOH 或 INVALID_TYPE，避免發(fā)出無(wú)效請(qǐng)求。

const requestUrl = `${server.url}?name=${encodeURIComponent(name)}&type=${encodeURIComponent(typeKey)}`;
const response = await fetchWithTimeout(
  requestUrl,
  {
    method: "GET",
    headers: { Accept: "application/dns-json" },
  },
  10000,
);

這里統(tǒng)一用超時(shí)封裝后的請(qǐng)求函數(shù)，避免上游響應(yīng)異常時(shí)長(zhǎng)時(shí)間卡住。

5）把 DoH 原始應(yīng)答轉(zhuǎn)換成頁(yè)面可用結(jié)構(gòu)

DoH 返回里真正要展示的是 Answer 數(shù)組。實(shí)現(xiàn)里會(huì)做一次輕量轉(zhuǎn)換：保留原字段，同時(shí)補(bǔ)一個(gè) typename，把數(shù)字類(lèi)型改成可讀字符串。

const parseAnswerList = (data) => {
  if (!data || !Array.isArray(data.Answer)) return [];
  return data.Answer.map((row) => ({
    ...row,
    typename: DNS_TYPES[String(row.type)] || String(row.type),
  }));
};

這樣前端渲染時(shí)可以直接顯示：主機(jī)名、類(lèi)型、記錄值、TTL，不需要再做二次轉(zhuǎn)換。

6）錯(cuò)誤處理按“可定位”設(shè)計(jì)

這套實(shí)現(xiàn)把錯(cuò)誤分成幾類(lèi)：

• 參數(shù)錯(cuò)誤：如類(lèi)型非法、DoH 非法
• 上游響應(yīng)錯(cuò)誤：如返回體不是合法 JSON
• 請(qǐng)求失?。荷嫌尾豢蛇_(dá)或超時(shí)

接口會(huì)返回統(tǒng)一結(jié)構(gòu)，前端只需要讀取 status 和 message 就能完成提示。

7）這套功能 JS 的關(guān)鍵點(diǎn)

這個(gè)工具的核心不在“把 DNS 查出來(lái)”本身，而在于把查詢(xún)鏈路標(biāo)準(zhǔn)化：輸入規(guī)范化、參數(shù)校驗(yàn)、DoH 請(qǐng)求、應(yīng)答轉(zhuǎn)換、結(jié)果直出。對(duì)用戶(hù)來(lái)說(shuō)是一次點(diǎn)擊；對(duì)實(shí)現(xiàn)來(lái)說(shuō)是一條清晰的數(shù)據(jù)處理流水線。

以上就是利用JS實(shí)現(xiàn)在線域名DNS查詢(xún)工具的詳細(xì)內(nèi)容，更多關(guān)于JS在線域名DNS查詢(xún)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論