readAsDataURL在Ionic打包iOS/Android端失效但浏览器正常如何解决

1. 原生环境网络权限缺失 #

Ionic打包为原生应用后，默认没有开启网络访问权限，会导致图片资源拉取失败：

• Android端需要在android/app/src/main/AndroidManifest.xml中添加网络权限配置：

  <uses-permission android:name="android.permission.INTERNET" />
  

• iOS端需要确认ATS配置是否限制了HTTPS资源访问，如果你的Firebase资源域名不在白名单内，需要在ios/App/App/Info.plist中添加对应域名的访问许可，或临时开启全局HTTP/HTTPS访问权限用于排查。

2. 内容安全策略(CSP)限制 #

Ionic默认的webview CSP规则会限制blob、data URI类型资源的读取，你需要在项目入口index.html的CSP meta标签中添加对应的允许规则：

<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: blob: ;">

3. 原有代码缺陷修复 #

你当前的代码缺失了网络请求异常捕获、返回结果校验逻辑，所以blob为空时FileReader会进入无报错的挂起状态，优化后的代码如下：

getDataUrl(url) {
    return new Promise(function (resolve, reject) {
      var request = new XMLHttpRequest();
      request.open('GET', url, true);
      request.responseType = 'blob';
      // 新增网络请求错误捕获
      request.onerror = function(e) {
        console.log('网络请求失败:', e);
        reject('网络请求异常');
      };
      request.onload = function () {
        // 先校验请求返回状态
        if (request.status !== 200) {
          reject(`资源请求失败，状态码：${request.status}`);
          return;
        }
        // 校验返回的blob是否为空
        if (!request.response || request.response.size === 0) {
          reject('返回的图片资源为空');
          return;
        }
        var reader = new FileReader();
        reader.onload = function (e) {
          console.log('DataURL:', e.target.result);
          resolve(e.target.result)
        };
        reader.onerror= function (e) {
          console.log('FileReader处理错误:', e.target.error);
          reject(e.target.error)
        };
        reader.readAsDataURL(request.response);
      };
      request.send();
    });
  }

4. 备选实现方案 #

如果webview层的实现始终存在兼容性问题，可以使用Ionic原生文件插件替代webview的API实现资源拉取转base64，Capacitor环境下可以使用@capacitor/filesystem插件，Cordova环境下可以使用cordova-plugin-file插件，完全规避webview的权限、CSP限制。

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