Cordova Android 10未启用不安全文件模式时根路径设置问题

背景说明 #

正如breautek在对应GitHub issue中说明的，Android 10是当前Cordova支持的最高平台版本，同时也是应用上架Play Store的最低平台要求。
若不在config.xml中添加如下配置：

<preference name="hostname" value="localhost" />
<preference name="AndroidInsecureFileModeEnabled" value="true" />

就会出现非CORS类型的XHR请求失效、file://协议无法访问的问题。但该方案仅为临时方案，后续Play Store大概率会出台相关限制导致方案失效，不建议采用。
在不使用上述临时配置的前提下，即使已经解决XHR的CORS请求相关问题，仍会出现应用根路径设置失效、图片等静态资源无法正常加载的问题。

常见错误尝试 #

通过cordova.file.applicationDirectory拼接资源路径的写法存在两个核心问题：

• 代码本身存在字符串拼接语法错误
• 最终生成的file:///android_asset/www/img/1.png格式路径，会被Android 10+系统WebView的安全策略拦截，无法正常加载

错误代码示例：

var urlRootMobile=cordova.file.applicationDirectory+'www/';
// 语法错误：点运算符无法拼接字符串
var img1 = urlRootMobile."/img/1.png";
var img2 = urlRootMobile."/img/2.png";
var img3 = urlRootMobile."/img/3.png";

此外直接使用https://localhost/www、https://localhost、/作为根路径，在未做对应配置的前提下也不会生效。

可行解决方案 #

第一步：调整config.xml基础配置 #

不开启不安全文件模式，配置自定义hostname和应用启动入口：

<!-- 自定义本地域名，避免和localhost服务冲突 -->
<preference name="hostname" value="app.local" />
<!-- 明确关闭不安全文件模式，符合Play Store上架规则 -->
<preference name="AndroidInsecureFileModeEnabled" value="false" />
<!-- 配置应用启动的初始URL -->
<preference name="AndroidStartURL" value="https://app.local/www/index.html" />
<!-- 配置白名单允许本地域名访问 -->
<access origin="https://app.local" />
<allow-navigation href="https://app.local/*" />

如果安装了cordova-plugin-whitelist插件，需要确保页面meta标签中的内容安全策略允许加载本地域名下的资源。

第二步：正确引用本地资源 #

不需要通过cordova.fileAPI拼接file://路径，直接使用以下两种方式引用即可：

• 相对路径引用（最推荐，跨平台兼容性最好）

const img1 = "./img/1.png";
const img2 = "./img/2.png";
const img3 = "./img/3.png";

• 基于当前页面origin拼接绝对路径，适合动态生成资源地址的场景

const assetRoot = window.location.origin + "/www/";
const img1 = assetRoot + "img/1.png";
const img2 = assetRoot + "img/2.png";
const img3 = assetRoot + "img/3.png";

配置完成后必须执行cordova clean android清理旧编译产物，再重新编译运行，否则配置不会生效。该方案不会触发Play Store的安全规则限制，可长期使用。

内容的提问来源于stack exchange，提问作者Francesco G.