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. 1.

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); 
});1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

HarmonyOS

zxjiu

2024-11-07 10:30:17

浏览

回答 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%') 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.

2024-11-07 16:04:38

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

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

订阅鸿蒙技术特刊，精选内容抢先看