实现 DNS 查询 工具

分类：developer ｜ 标签：DNS、解析、查询 通过 DoH 查询域名解析记录

2.1 功能说明

通过 DoH 查询域名解析记录

2.1.1 使用指南

功能说明

通过公共 DNS-over-HTTPS（Cloudflare）查询域名解析记录，纯前端、无需后端。

使用场景

排查解析、确认记录类型。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• run()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref } from 'vue'
import ToolPageShell from '@/components/ToolPageShell.vue'

const types = ['A', 'AAAA', 'CNAME', 'MX', 'TXT', 'NS', 'SOA']
const domain = ref('example.com')
const type = ref('A')
const loading = ref(false)
const rows = ref([])
const error = ref('')

async function run() {
  error.value = ''; rows.value = []
  const d = domain.value.trim()
  if (!d) { error.value = '请输入域名'; return }
  loading.value = true
  try {
    const url = `https://cloudflare-dns.com/dns-query?name=${encodeURIComponent(d)}&type=${type.value}`
    const r = await fetch(url, { headers: { accept: 'application/dns-json' } })
    if (!r.ok) throw new Error('HTTP ' + r.status)
    const j = await r.json()
    rows.value = (j.Answer || []).map(a => ({ name: a.name, type: a.type, data: a.data, ttl: a.TTL }))
    if (!rows.value.length) error.value = '无记录'
  } catch (e) {
    error.value = '查询失败（可能被浏览器网络策略拦截）：' + e.message
  } finally { loading.value = false }
}

2.3 效果截图

工具访问地址：https://www.i91tools.com/tools/dns-lookup