HTML怎么做翻译工具_HTML在线文字翻译工具实现【总结】-html教程-PHP中文网

纯前端 html+javascript 无法实现真正可用的翻译工具，因其受跨域限制且无法直连 google、deepl 等主流翻译 api；可行方案是使用开放 cors 的 libretranslate 公共接口（如 https://libretranslate.com），注意 post 请求格式、语言参数及频率限制，并需通过本地服务器（非 file://）运行。

html怎么做翻译工具_html在线文字翻译工具实现【总结】

纯前端 HTML + JavaScript 做不了真正可用的翻译工具——它没法绕过跨域限制，也调用不了任何主流翻译 API（如 Google、DeepL、百度）的后端接口。所谓“HTML在线翻译工具”，实际必须依赖服务端中转，或使用极少数开放 CORS 的实验性接口（稳定性和配额极低）。

为什么 `fetch` 直接请求 Google Translate API 会失败

浏览器会拦截这类请求，控制台报错类似：Blocked by CORS policy: No 'Access-Control-Allow-Origin' header。Google、微软、腾讯等所有商用翻译 API 都明确禁止前端直连，这是安全与配额管控的硬性要求。

常见误操作包括：

把 https://translate.google.com/translate_a/single?... 地址直接丢进 fetch() —— 必然失败，该地址只响应浏览器完整页面请求，不返回 JSON，也不带 CORS 头
尝试伪造 User-Agent 或 Referer —— 无效，服务端会校验请求上下文，甚至触发风控
用 iframe 加载翻译页并试图读取内容 —— 受同源策略限制，无法跨域访问 iframe.contentDocument

可行的最小可行方案：用免费且开放 CORS 的替代接口

目前较稳定的选项只有 https://libretranslate.com（开源 LibreTranslate 部署的公共实例），它明确允许前端直连，返回标准 JSON。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

实操要点：

POST 请求必须设 Content-Type: application/json，body 是 JSON 字符串，不是 URL 参数
目标语言码用 target（如 "zh"），源语言可传 source: "auto"，但自动检测不准时建议显式传 "en"
注意免费实例有频率限制（约 10–20 次/分钟），超限返回 429 Too Many Requests

示例请求片段：

fetch("https://libretranslate.com/translate", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    q: "Hello world",
    source: "auto",
    target: "zh"
  })
})