HarmonyOS 鸿蒙Next web加载file://协议的图片文件，提示跨域问题

HarmonyOS 鸿蒙Next web加载file://协议的图片文件，提示跨域问题 我有如下一个使用场景： web里面有按钮点击调用PhotoViewPicker相册选择图片，然后将PhotoViewPicker选中的图片地址（是file://协议）回调给web显示出来。 这在Android里面没有问题，图片返回的是一个sdcard的绝对路径，传给h5的image 的src可以直接显示，但是在鸿蒙系统里，PhotoSelectResult返回的是file://协议的地址，直接传给web无法读取。

报错信息： Access to image at ‘file://media/Photo/7/IMG_1712132973_004/IMG_004.jpg’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, arkweb, data, chrome-extension, chrome, https, chrome-untrusted。

demo代码：

let PhotoSelectOptions = new picker.PhotoSelectOptions();
PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
PhotoSelectOptions.maxSelectNumber = result[0] as number;
let photoPicker = new picker.PhotoViewPicker();
photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult) => {
  console.info('applog:' + PhotoSelectResult.photoUris);
  let jsStr = `__record_callback(${JSON.stringify(PhotoSelectResult.photoUris)});`;
  console.info('applog,jsStr:' + jsStr);
  this.webController.runJavaScript(jsStr)
}).catch((err: BusinessError) => {
  console.error('PhotoViewPicker.select failed with err: ' + err);
});

更多关于HarmonyOS 鸿蒙Next web加载file://协议的图片文件，提示跨域问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

PhotoViewPicker获取的地址并非应用沙箱路径，需要先将图片复制到应用沙箱路径

如果是离线H5加载的webview，不需要处理跨域；如果是https URL加载的webview，需要构造虚拟域名加载本地沙箱路径image资源，并设置file.fd为responseData返回

// 复制到沙箱路径工具方法
function copyFileToApp(src: string, dst: string) {
  try {
    let fileArray = src.split("/");
    let fileName = fileArray[fileArray.length-1];
    let file = fs.openSync(src, fs.OpenMode.READ_ONLY);
    let dstPath = dst + '/' + fileName;
    let file2 = fs.openSync(dstPath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE); //先创建有读写权限的文件，再把不可读写的文件复制过来
    fs.copyFileSync(file.fd, file2.fd);
    return dstPath;
  } catch (e) {
    console.error("txy copy error")
    return '';
  }
}

build() {
  Row() {
    Column() {
      Button('photo picker')
        .onClick(() => {
          let PhotoSelectOptions = new picker.PhotoSelectOptions();
          PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
          PhotoSelectOptions.maxSelectNumber = 1;
          let photoPicker = new picker.PhotoViewPicker();
          photoPicker.select(PhotoSelectOptions).then(async (PhotoSelectResult) => {
            this.photoUris = PhotoSelectResult.photoUris;
            const dst = 'file://' + this.context.filesDir;
            this.sandboxPath = copyFileToApp(this.photoUris[0], dst)
            let jsStr = `__record_callback('${'https://virtual.test.example.image/' + this.sandboxPath}');`;
            this.controller.runJavaScript(jsStr)
          }).catch((err: BusinessError) => {
          });
        }
      Web({ src: 'https://test.example', controller: this.controller })
        .imageAccess(true).fileAccess(true).onInterceptRequest((event) => {
        if (!event) {
          return;
        }
        let fileUri = event.request.getRequestUrl()
        if (fileUri.startsWith("https://virtual.test.example.image/")) {
          fileUri = fileUri.replace('https://virtual.test.example.image/', '');
          let file: fs.File;
          file = fs.openSync(fileUri, fs.OpenMode.READ_WRITE);
          let response = new WebResourceResponse();
          response.setResponseData(file.fd);
          response.setResponseEncoding('utf-8');
          response.setResponseMimeType("image/jpeg");
          response.setResponseCode(200);
          response.setReasonMessage('OK');
          response.setResponseIsReady(true);
          return response;
        }
        return null;
      })
    }
    .width('100%')
  }
  .height('100%')
}

更多关于HarmonyOS 鸿蒙Next web加载file://协议的图片文件，提示跨域问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）系统中，当你尝试在Next web环境中加载使用file://协议的图片文件时，遇到跨域问题，这通常是因为出于安全考虑，Web环境对本地文件的访问有严格的限制。

HarmonyOS的Web环境可能遵循了类似的同源策略或更严格的文件访问控制，以防止恶意脚本访问用户的本地文件系统。因此，直接使用file://协议加载图片可能会因为跨域策略而被阻止。

解决这一问题的一种可能方法是通过将图片文件上传到服务器或使用应用内资源的方式，使用HTTP或HTTPS协议来访问这些图片。这样可以避免跨域问题，并且更符合Web安全的最佳实践。

如果必须在本地环境中使用这些图片，可能需要考虑开发一个本地服务来提供这些文件，或者调整应用的权限设置（如果可能的话），以允许Web环境访问特定的本地文件路径。然而，这种方法可能涉及到更复杂的开发工作和潜在的安全风险。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部