HarmonyOS 鸿蒙Next Web组件本地资源跨域问题,不支持Vue3打包的H5工程

发布于 1周前 作者 ionicwang 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Web组件本地资源跨域问题,不支持Vue3打包的H5工程

现在官方提供的两种方案都要列出具体的文件,不能做通配匹配,随机命名的文件不好用, 请求大佬支持

现在官方的方案 https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-cross-origin-V5

7 回复
  /** 构造本地文件和构造返回的格式mimeType */
  mimeTypeMap = new Map([
    [".html", 'text/html'],
    [".css", 'text/css'],
    [".js", "text/javascript"],
    [".png", 'image/png'],
    [".jpg", 'image/jpeg'],
    [".ico", 'image/x-icon'],
    [".ttf", 'font/ttf'],
    [".otf", 'font/otf'],
    [".woff", 'font/woff'],
    [".woff2", 'font/woff2']
  ])

......


 // 前面用个特定的路径域名后续 onInterceptRequest 中 做匹配替换
    Web({
      src: `https://www.example.com/rawfile/h5/index.html`,
      controller: this.controller.getWebViewController()
    })
      .javaScriptProxy(this.controller.javaScriptProxy)
      .javaScriptAccess(true)
      .domStorageAccess(true)
      .verticalScrollBarAccess(false)
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
      .fileAccess(true)
      .onInterceptRequest((event) => {
        if (!event) {
          return;
        }
        // 当前URL
        const currRequestUrl = event.request.getRequestUrl()
        // 判断是否需要替换成本地
        if (currRequestUrl.includes(`https://www.example.com/rawfile/`)) {
          // https://www.example.com/rawfile/
          let rawfileName: string =
            event.request.getRequestUrl().replace(`https://www.example.com/rawfile/`, '')
          let urlParseObj = url.URL.parseURL(event.request.getRequestUrl())
          let urlSuffix = urlParseObj.pathname.split('.').pop()
          // 获取对应的 mineType
          let mimeType = this.mimeTypeMap.get('.' + urlSuffix) || ''
          if (typeof mimeType === 'string') {
            let response = new WebResourceResponse();
            response.setResponseData($rawfile(rawfileName));
            response.setResponseEncoding('utf-8');
            response.setResponseMimeType(mimeType);
            response.setResponseCode(200);
            response.setReasonMessage('OK');
            response.setResponseIsReady(true);
            return response;
          }
        }
        return null;
      })

看到这个帖子下的@大魔王  做法,解决了,进一步调整了处理逻辑
https://developer.huawei.com/consumer/cn/forum/topic/0203159113348965189?fid=0109140870620153026
能提供具体的demo吗?方便进一步定位

在客户内网器,不太方便呀,不过现在参考官方和其他小伙伴的方案解决了

好的 解决了就行

两个方案都试了,没有效果,不知道是不是哪里整错了

针对HarmonyOS 鸿蒙Next Web组件本地资源跨域问题,不支持Vue3打包的H5工程的情况,以下是一些解决方案:

  1. 构造虚拟域名:由于ArkWeb内核不允许file协议或resource协议访问跨域请求,可以通过构造虚拟域名的方式加载本地资源,规避跨域问题。
  2. 开启DOM存储权限:若Vue3打包的H5工程中使用了localstorage,需要确保Web组件已开启dom存储权限,即添加.domStorageAccess(true)
  3. 自定义协议:使用WebView的customizeSchemes接口自定义协议,并设置isSupportCORS为true,赋予跨域权限。同时,在onInterceptRequest方法中拦截并处理请求,返回自定义协议下的资源。

如果上述方法均无法解决问题,可能是由于Web组件或Vue3框架的兼容性问题,建议检查相关文档或更新版本。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部