---
categories: Original
date: 2025-07-10T00:00:00Z
tags:
    - 信息技术
    - 前端
    - Cloudflare
slug: cf-doh-demo
title: Cloudflare DoH DNS 查询
---

<p>Cloudflare DoH DNS 查询，由 <a href="https://manus.im/">Manus</a> 开发。</p>
<p>
    <code>https://cloudflare-dns.com/dns-query</code>
    <a
        href="https://developers.cloudflare.com/1.1.1.1/encryption/dns-over-https/make-api-requests/"
        >文档</a
    >
</p>

<form id="dohForm">
    <label>域名:</label>
    <input
        type="text"
        id="domain"
        placeholder="example.com"
        value="example.com"
        required
    />
    <br />

    <label for="recordType">记录类型:</label>
    <select id="recordType" required>
        <option selected="">A</option>
        <option>AAAA</option>
        <option>ANAME</option>
        <option>CERT</option>
        <option>CNAME</option>
        <option>DNSKEY</option>
        <option>HTTPS</option>
        <option>IPSECKEY</option>
        <option>LOC</option>
        <option>MX</option>
        <option>NS</option>
        <option>OPENPGPKEY</option>
        <option>PTR</option>
        <option>RRSIG</option>
        <option>SIG</option>
        <option>SOA</option>
        <option>SPF</option>
        <option>SRV</option>
        <option>SSHFP</option>
        <option>TA</option>
        <option>TXT</option>
        <option>URI</option>
        <option>ANY</option>
    </select>
    <br />

    <label>
        <input type="checkbox" id="disableDnssec" />
        禁用 DNSSEC 验证
    </label>
    <br />

    <button type="submit">查询</button>
</form>

<div id="result"></div>

<script>
    document
        .getElementById("dohForm")
        .addEventListener("submit", async function (e) {
            e.preventDefault();

            const domain = document.getElementById("domain").value.trim();
            const recordType = document
                .getElementById("recordType")
                .value.trim()
                .toUpperCase();
            const disableDnssec =
                document.getElementById("disableDnssec").checked;
            const resultDiv = document.getElementById("result");

            if (!domain || !recordType) {
                resultDiv.innerHTML = "<p>请输入域名和记录类型</p>";
                return;
            }

            resultDiv.innerHTML = "<p>查询中...</p>";

            try {
                let dohUrl = `https://cloudflare-dns.com/dns-query?name=${encodeURIComponent(
                    domain,
                )}&type=${encodeURIComponent(recordType)}`;
                // https://www.iana.org/assignments/dns-parameters/dns-parameters.xhtml#dns-parameters-4
                // DO bit - whether the client wants DNSSEC data (either empty or one of 0, false, 1, or true).
                // CD bit - disable validation (either empty or one of 0, false, 1, or true).
                if (disableDnssec) {
                    dohUrl += "&cd=true&do=false";
                } else {
                    dohUrl += "&cd=false&do=true";
                }

                const response = await fetch(dohUrl, {
                    method: "GET",
                    headers: {
                        Accept: "application/dns-json",
                    },
                });

                if (!response.ok) {
                    // throw new Error(`HTTP 错误: ${response.status}`);
                }

                const data = await response.json();

                let resultHtml = "<h3>查询结果</h3>";
                resultHtml += `<p>域名: ${domain}</p>`;
                resultHtml += `<p>记录类型: ${recordType}</p>`;
                // resultHtml += `<p>状态: ${data.Status}</p>`;

                if (data.Answer && data.Answer.length > 0) {
                    resultHtml += "<h4>DNS记录:</h4>";
                    resultHtml += '<table border="1">';
                    resultHtml +=
                        "<tr><th>名称</th><th>类型</th><th>TTL</th><th>数据</th></tr>";

                    data.Answer.forEach((record) => {
                        resultHtml += `<tr>
                            <td>${record.name}</td>
                            <td>${record.type}</td>
                            <td>${record.TTL}</td>
                            <td>${record.data}</td>
                        </tr>`;
                    });

                    resultHtml += "</table>";
                } else {
                    resultHtml += "<p>未找到记录</p>";
                }

                resultHtml += "<h4>原始响应:</h4>";
                resultHtml += `<pre>${JSON.stringify(data, null, 2)}</pre>`;

                resultDiv.innerHTML = resultHtml;
            } catch (error) {
                resultDiv.innerHTML = `<p>查询失败: ${error.message}</p>`;
            }
        });
</script>