如何制作一个HTML在线文字翻译工具？

本文共计728个文字，预计阅读时间需要3分钟。

纯前端+HTML+JavaScript做不了真正实用的翻译，不要试图图解问题，不要啰嗦，不超过100个字，直接输出结果：

为什么 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。

立即学习“前端免费学习笔记（深入）”；

实操要点：

• 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" }) })

本地开发调试时容易忽略的坑

直接双击打开 index.html 会导致 fetch 报 net::ERR_FILE_PROTOCOL —— 浏览器禁止 file:// 协议发起跨域请求。

必须用本地服务启动：

• Python 3：python3 -m http.server 8000，然后访问 http://localhost:8000
• Node.js：npx serve 或 npx http-server
• VS Code 安装 Live Server 插件，右键 “Open with Live Server”
• 跳过这步就永远看不到翻译结果，不是代码写错了，是根本发不出请求

真要上线用，别硬扛 LibreTranslate 的不稳定；最简路径是起一个几行 Python/Node 的代理路由，转发请求并加 CORS 头——那已经不是“纯 HTML”能解决的事了。