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

核心鏈路很簡單：

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

在線工具網址：https://see-tool.com/dns-query
工具截圖：

1）輸入先做規(guī)范化，避免臟數據進入查詢

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

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ù)請求參數會穩(wěn)定很多。

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

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

• domainInput：用戶輸入
• recordType：記錄類型（默認 1，即 A）
• dohServer：DoH 服務商（默認 alidns）
• isLoading：查詢中狀態(tài)
• resultRecords、resultDomain：結果數據

觸發(fā)查詢時會先清空舊結果，再發(fā)請求；請求完成后根據返回值決定展示記錄表格還是“無記錄”提示。Enter 鍵和按鈕點擊共用同一套查詢函數，交互邏輯保持一致。

3）服務端對域名再做一次標準化和校驗

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

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

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

4）DoH 查詢的核心是“服務映射 + 類型映射”

工具內部先定義兩張映射表：

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

查詢時先檢查映射是否存在，不存在直接拋出 INVALID_DOH 或 INVALID_TYPE，避免發(fā)出無效請求。

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)一用超時封裝后的請求函數，避免上游響應異常時長時間卡住。

5）把 DoH 原始應答轉換成頁面可用結構

DoH 返回里真正要展示的是 Answer 數組。實現里會做一次輕量轉換：保留原字段，同時補一個 typename，把數字類型改成可讀字符串。

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

這樣前端渲染時可以直接顯示：主機名、類型、記錄值、TTL，不需要再做二次轉換。

6）錯誤處理按“可定位”設計

這套實現把錯誤分成幾類：

• 參數錯誤：如類型非法、DoH 非法
• 上游響應錯誤：如返回體不是合法 JSON
• 請求失?。荷嫌尾豢蛇_或超時

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

7）這套功能 JS 的關鍵點

這個工具的核心不在“把 DNS 查出來”本身，而在于把查詢鏈路標準化：輸入規(guī)范化、參數校驗、DoH 請求、應答轉換、結果直出。對用戶來說是一次點擊；對實現來說是一條清晰的數據處理流水線。

以上就是利用JS實現在線域名DNS查詢工具的詳細內容，更多關于JS在線域名DNS查詢的資料請關注腳本之家其它相關文章！

最新評論