HarmonyOS web组件接入前端vite打包的本地h5项目时遇到跨域问题

1.前端h5项目,使用vite + react开发,使用的hash路由,访问形式如:xxx./index.html/#/detail, 打包好后放入rawfile目录。

2.使用web组件去展示这个h5项目,遇到跨域问题,根据社区搜索到的解决方案(地址:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-cross-origin-V5),在onInterceptRequest里面做了文件地址的替换,能展示h5页面。

现在的问题是:

1.我想指定访问的h5页面应该怎么做?访问h5项目首页,是src: “index.html”,现在想访问detail路由,地址应该是:src: ‘index.html/#/detail’,但是因为加了#号,就不能显示了。

2.不想在onInterceptRequest去处理#号,因为项目涉及到的微应用比较多,稍有不慎,会影响到一些特殊场景。

下面是部分代码:

// 访问域名,注意不要加末尾的/
private domain: string = 'xxx'
private assetsPath: string = 'dist'

private mimeTypeMap = new Map([
  ["html", "text/html"],
  ["js", "text/javascript"],
  ["css", "text/css"],
  ["json", "application/json"],
  ["xml", "application/xml"],
  ["text", "text/plain"],

  ["png", "image/png"],
  ["jpg", "image/jpeg"],
  ["gif", "image/gif"],
  ["basis", "image/basis"],
  ["ktx", "image/ktx"],
  ["ktx2", "image/ktx2"],
  ["dds", "image/dds"],

  ["wav", "audio/x-wav"],
  ["ogg", "audio/ogg"],
  ["mp3", "audio/mp3"],
  ["mp4", "audio/mp4"],
  ["aac", "audio/aac"],
  ["opus", 'audio/ogg; codecs="opus'],

  ["bin", 'application/octet-stream'],
  ["gltf", 'application/json'],
  ["glb", 'model/gltf-binary'],
  ["zip", "application/zip"],
])

Web({
  src: `${this.domain}/index.html`, // 这里需要替换为index.html/#/detail
  controller: this.controller,
  renderMode: RenderMode.SYNC_RENDER
})
  .domStorageAccess(true)
  .fileAccess(true)
  .onlineImageAccess(true)
  .javaScriptAccess(true)
  .mixedMode(MixedMode.All)
  .onInterceptRequest((event) => {
    if (!event) {
      return;
    }
    const currentUrl = event.request.getRequestUrl();
    if (currentUrl.includes(this.domain) && currentUrl.indexOf(`${this.domain}/app`) === -1) {
      let filePath = currentUrl.split(`${this.domain}/`)[1]
      let suffix = filePath.split('.')[filePath.split('.').length - 1]
      let mimeType = this.mimeTypeMap.get(suffix);
      if (typeof mimeType === 'string') {
        let response = new WebResourceResponse();
        response.setResponseData($rawfile(`${this.assetsPath}/${filePath}`));
        response.setResponseEncoding('utf-8');
        response.setResponseMimeType(mimeType);
        response.setResponseCode(200);
        response.setReasonMessage('OK');
        response.setResponseIsReady(true);
        return response;
      }
    }
    return null;
  })
HarmonyOS
2025-01-09 18:09:02
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

代码中拦截器对dataPath进行处理下,就能成功跳转到detail。

处理的代码类似下面示例:

if(dataPath == "xxx./index.html/#/detail"){
  dataPath = "xxx/index.html"
}
response.setResponseData($rawfile(dataPath));

web组件的src跳转的url还为xxx./index.html/#/detail具体的页面,但是setResponseData中是index.html页面

setResponseData方法的参数描述:要设置的资源响应数据。string表示HTML格式的字符串。number表示文件句柄, 此句柄由系统的Web组件负责关闭。 Resource表示应用rawfile目录下文件资源。 ArrayBuffer表示资源的原始二进制数据。

rawfile目录下并没有/index.html/#/detail文件

分享
微博
QQ
微信
回复
2025-01-09 19:47:16
相关问题
HarmonyOS Web组件加载本地H5文件
516浏览 • 1回复 待解决
HarmonyOS Web组件本地资源问题
215浏览 • 1回复 待解决
HarmonyOS Web组件请求问题
626浏览 • 1回复 待解决
HarmonyOS web组件加载h5h5拉起摄像头
1065浏览 • 1回复 待解决
HarmonyOS 本地H5加载
482浏览 • 1回复 待解决
HarmonyOS Web组件加载H5白屏
434浏览 • 1回复 待解决
HarmonyOS Web本地资源加载异常
176浏览 • 1回复 待解决
HarmonyOS web资源问题
214浏览 • 1回复 待解决
HarmonyOS web组件关闭拦截
208浏览 • 1回复 待解决
HarmonyOS webH5交互
1164浏览 • 1回复 待解决
Web组件如何访问资源?
604浏览 • 1回复 待解决
HarmonyOS web离线加载请求问题
870浏览 • 1回复 待解决
HarmonyOS webview组件问题
252浏览 • 1回复 待解决
HarmonyOS Web组件加载在线H5页面
593浏览 • 1回复 待解决
HarmonyOS 本地webView方案
1398浏览 • 1回复 待解决
HarmonyOSh5前端侧调用应用侧方法
311浏览 • 2回复 待解决