纯前端 HTML+JavaScript 无法实现真正可用的翻译工具，因其受跨域限制且无法直连 Google、DeepL 等主流翻译 API；可行方案是使用开放 CORS 的 LibreTranslate 公共接口（如 https://libretranslate.com），注意 POST 请求格式、语言参数及频率限制，并需通过本地服务器（非 file://）运行。
纯前端 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。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
实操要点：
- 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”能解决的事了。
