如何制作一个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。