如何让i18next在Cordova iOS 6平台上正常运行？

架构老林

2026-10-1

问题根因

报错的核心原因是WKWebView对本地file协议的资源请求不支持CORS预请求（OPTIONS请求），旧版i18next默认依赖XHR插件加载本地翻译JSON文件，默认携带的请求头会触发跨域预请求校验，而file协议没有服务端返回预请求响应，因此加载失败。

可行解决方案（按优先级推荐）

方案1：绕开XHR加载本地翻译（兼容性最高，改造成本最低）

直接将本地翻译JSON文件转为JS全局变量注入，完全避免本地XHR请求：

将所有翻译JSON文件改为JS文件，比如translation.de.json改为translation.de.js，内容调整为：

// translation.de.js 内容
window.i18nResources = window.i18nResources || {}
window.i18nResources.de = {
  // 粘贴原translation.de.json的全部内容
}

在index.html中提前引入所有翻译JS文件，引入顺序早于i18next初始化逻辑
调整i18next初始化配置，移除XHR后端依赖，直接传入内置资源：

i18next.init({
  // 直接传入预加载的翻译资源
  resources: window.i18nResources,
  lng: 'de', // 替换为你的默认语言配置
  initImmediate: false,
  // 保留其他原有配置项
})

方案2：调整i18next XHR后端配置

如果不想修改翻译文件的加载方式，可以修改XHR后端的配置，关闭触发预请求的参数：

i18next.use(XHR)
.init({
  backend: {
    loadPath: '/translation/{{lng}}.json',
    // 关闭跨域相关配置，避免触发OPTIONS预请求
    crossDomain: false,
    withCredentials: false,
    customHeaders: {}
  },
  // 其他原有配置
})

同时调整CSP配置，补充file协议的访问权限：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' data: gap: https://ssl.gstatic.com 'unsafe-eval' file:; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">