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
      
        赞
        
 收藏 0
 回答 1
 
        待解决
        
相关问题
 HarmonyOS  Web组件加载本地H5文件跨域 
1448浏览  • 1回复 待解决
HarmonyOS  web加载本地h5页面的网络请求跨域问题 
1212浏览  • 1回复 待解决
HarmonyOS Web组件本地资源跨域问题 
783浏览  • 1回复 待解决
HarmonyOS  Web组件加载本地H5页面,页面中接口请求被跨域规则限制,如何解除跨域限制 
1209浏览  • 1回复 待解决
HarmonyOS Web组件跨域请求问题 
1493浏览  • 1回复 待解决
HarmonyOS  web组件加载本地离线包的cookie跨域 
1298浏览  • 1回复 待解决
HarmonyOS  web组件加载h5,h5拉起摄像头 
2076浏览  • 1回复 待解决
HarmonyOS  Web组件加载H5白屏 
1300浏览  • 1回复 待解决
HarmonyOS  本地H5加载 
1446浏览  • 1回复 待解决
HarmonyOS Web本地资源跨域加载异常 
858浏览  • 1回复 待解决
#鸿蒙通关秘籍#如何解决Web组件本地资源跨域问题? 
1347浏览  • 1回复 待解决
HarmonyOS web资源跨域问题 
1230浏览  • 1回复 待解决
HarmonyOS  Web组件加载VUE3打包的H5资源白屏无法显示 
2017浏览  • 1回复 待解决
HarmonyOS  web与H5交互 
2039浏览  • 1回复 待解决
HarmonyOS  Web加载本地沙箱资源H5文件报错 
1209浏览  • 1回复 待解决
HarmonyOS web组件关闭跨域拦截 
946浏览  • 1回复 待解决
HarmonyOS h5容器@State修饰枚举值,枚举值后续三目运算时赋值为undefined 
921浏览  • 1回复 待解决
HarmonyOS web组件如何监听h5内部的router跳转 
1243浏览  • 1回复 待解决
HarmonyOS  web离线加载请求跨域问题 
1717浏览  • 1回复 待解决
HarmonyOS webview组件跨域问题 
1383浏览  • 1回复 待解决
Web组件如何访问跨域资源? 
1250浏览  • 1回复 待解决
HarmonyOS Web组件加载在线H5页面 
1478浏览  • 1回复 待解决
HarmonyOS  在h5前端侧调用应用侧方法 
949浏览  • 1回复 待解决
HarmonyOS  web组件如何监听到H5的页面跳转 
1188浏览  • 1回复 待解决
Web组件展示页面片,h5内容会超出Web组件宽度 
1433浏览  • 1回复 待解决





















代码中拦截器对dataPath进行处理下,就能成功跳转到detail。
处理的代码类似下面示例:
web组件的src跳转的url还为xxx./index.html/#/detail具体的页面,但是setResponseData中是index.html页面
setResponseData方法的参数描述:要设置的资源响应数据。string表示HTML格式的字符串。number表示文件句柄, 此句柄由系统的Web组件负责关闭。 Resource表示应用rawfile目录下文件资源。 ArrayBuffer表示资源的原始二进制数据。
rawfile目录下并没有/index.html/#/detail文件