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

我有如下一个使用场景:web里面有按钮点击调用PhotoViewPicker相册选择图片,然后将PhotoViewPicker选中的图片地址(是file://协议)回调给web显示出来。

在HarmonyOS系统里,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
2024-11-07 10:30:17
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

​file协议由于安全策略限制不允许跨域,可通过以下方式规避:​https://gitee.com/openharmony/docs/pulls/40014/files

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(" 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://xxx.url.for.image/' + this.sandboxPath}');`; 
            this.controller.runJavaScript(jsStr) 
          }).catch((err: BusinessError) => { 
          }); 
        }) 
      Web({ src: 'https://xxx.dra.xxx.link', controller: this.controller }) 
        .imageAccess(true).fileAccess(true).onInterceptRequest((event) => { 
        if (!event) { 
          return; 
        } 
        let fileUri = event.request.getRequestUrl() 
        if (fileUri.startsWith("https://xxx.url.for.image/")) { 
          fileUri = fileUri.replace('https://xxx.url.for.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%') 
}
分享
微博
QQ
微信
回复
2024-11-07 16:04:38
相关问题
HarmonyOS web离线加载请求问题
380浏览 • 1回复 待解决
HarmonyOS Web组件请求问题
171浏览 • 1回复 待解决
HarmonyOS webview问题
472浏览 • 1回复 待解决
Web组件如何访问资源?
318浏览 • 1回复 待解决
HarmonyOS 本地webView方案
570浏览 • 1回复 待解决
iframe标签 src内部访问top问题
166浏览 • 1回复 待解决
webview中问题解决方案
2370浏览 • 1回复 待解决
HarmonyOS web加载页面图片不显示
350浏览 • 1回复 待解决
HarmonyOS web组件加载pdf问题
480浏览 • 1回复 待解决
HarmonyOS web上传文件图片
152浏览 • 1回复 待解决
web组件对html文件加载
709浏览 • 1回复 待解决
HarmonyOS Web组件加载html文件异常
397浏览 • 1回复 待解决
HarmonyOS Web组件HTTP图片加载如何放行
352浏览 • 1回复 待解决
HarmonyOS Image 加载网络图片问题
499浏览 • 1回复 待解决
如何禁止web组件自动加载图片
679浏览 • 1回复 待解决