Electron项目读取语言文件失败原因及验证解决方法

问题背景 #

之前在Android和iOS平台上，用这段Cordova代码加载翻译JSON文件完全正常：

cordova.file.applicationDirectory + "www/res/languages/" + localStorage.getItem("optionlanguage") + ".json";

但把这套逻辑搬到Electron里就彻底失效了。

失效原因 #

cordova.file.applicationDirectory是Cordova专属API，是Cordova为适配移动端原生文件系统封装的路径标识，Electron并未实现这个API。在Electron环境中，前端页面的文件访问规则更贴近浏览器同源策略，直接用Cordova的路径拼接方式找不到对应的文件资源。

解决方法 #

• 修改CSP配置：更新connect-src规则，允许本地文件请求，避免内容安全策略拦截访问
• 用XMLHttpRequest实现文件加载：通过异步请求加载翻译文件，代码示例如下：

// 调用示例：加载法语翻译文件
get_electron('res/languages/fr-FR.json', 'text');

function get_electron(url, responseType) {
    return new Promise(function(resolve, reject) {
        var request = new XMLHttpRequest();
        request.open('GET', url);
        request.responseType = responseType;

        request.onload = function() {
            if (request.status == 200) {
                // resolve(request.response); // 需要返回数据时取消注释
                console.log(request.response);
            } else {
                // reject(Error(request.statusText)); // 需要处理错误时取消注释
            }
        };

        request.onerror = function() {
            reject(Error("Network Error"));
        };

        request.send();
    });
}

内容的提问来源于stack exchange，提问作者Ben