CORS 需 CDN 服务端配置响应头（如 Access-Control-Allow-Origin）才能让前端 fetch 跨域词典文件；前端无法单方面解决，须避免预检请求并验证响应头是否生效。
CORS 本身不用于“注入”资源，而是让浏览器允许前端脚本安全读取跨域响应。多语言 CDN 词典（如 https://cdn.example.com/zh.json、https://cdn.example.com/en.json）若需被页面 JS 直接 fetch 并解析使用，就必须由该 CDN 服务端主动开启 CORS 授权——这不是前端能单方面“用 CORS 解决”的，而是依赖 CDN 提供方配置响应头。
CDN 必须返回正确的 CORS 响应头
当你在页面中执行：
fetch('https://cdn.example.com/en.json')<br> .then(r => r.json())<br> .then(data => console.log(data));
浏览器会检查响应是否包含合法的 Access-Control-Allow-Origin。若缺失或不匹配，请求虽发出、响应也到达，但 JS 无法读取内容，控制台报错。
CDN 侧需确保每个词典文件响应中至少包含：
立即学习“Java免费学习笔记（深入）”；
Java Development Manual
下载
Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。 涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。 当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...
-
Access-Control-Allow-Origin: 指定你的前端域名（如
https://your-app.com），开发阶段可临时设为*（但若后续需带 cookie 或 auth token，则不能用*） -
Access-Control-Allow-Methods: 至少包含
GET -
Access-Control-Allow-Headers: 若你没加自定义 header，此项可省略；否则需明确列出（如
Accept-Language） -
Access-Control-Expose-Headers（可选）：若词典响应里含自定义元数据头（如
X-Last-Modified-Version），需在此声明才可被 JS 读取
前端调用时注意请求方式
避免触发预检（OPTIONS），让请求保持为“简单请求”，减少 CDN 配置负担：
- 只用
GET方法获取词典 - 不设置自定义请求头（如移除
Authorization、X-App-Version等） - 不修改
Content-Type（词典是纯 JSON，无需设Content-Type: application/json请求头——那是 POST 请求才用的） - 如需按语言动态加载，用 URL 参数或路径区分（
/en.json、/zh-CN.json），而非通过 header 传递语言标识
若 CDN 不可控（如第三方公共词典服务）
你无法要求对方配 CORS，此时不能直接 fetch，可考虑替代方案：
-
服务端代理：你的后端提供一个统一接口（如
/api/i18n/en），由它去请求 CDN，再把结果转发给前端——绕过浏览器 CORS 限制 -
JSONP（不推荐）：仅当 CDN 明确支持且返回函数包裹格式（如
callback({...})）时可用，但只支持 GET、无错误处理、有 XSS 风险，现代项目应避免 - 静态资源内联或构建时拉取：若词典内容稳定，可在构建阶段（如 Webpack/Vite 插件）从 CDN 下载并打包进应用，运行时不再跨域请求
验证是否生效的小技巧
打开浏览器开发者工具 → Network → 点击词典请求 → 查看 Response Headers：
- 确认存在
Access-Control-Allow-Origin: https://your-app.com（或*） - 状态码是
200，不是204或403 - 响应体可正常预览（说明未被浏览器拦截）
如果 headers 正确但依然报错，检查是否启用了 credentials: 'include' ——此时 Access-Control-Allow-Origin 绝对不能是 *，必须写具体域名。
