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文件跨域
516浏览 • 1回复 待解决
HarmonyOS web加载本地h5页面的网络请求跨域问题
279浏览 • 1回复 待解决
HarmonyOS Web组件本地资源跨域问题
215浏览 • 1回复 待解决
HarmonyOS Web组件加载本地H5页面,页面中接口请求被跨域规则限制,如何解除跨域限制
202浏览 • 1回复 待解决
HarmonyOS Web组件跨域请求问题
626浏览 • 1回复 待解决
HarmonyOS web组件加载本地离线包的cookie跨域
535浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何解决Web组件本地资源跨域问题?
458浏览 • 1回复 待解决
HarmonyOS web组件加载h5,h5拉起摄像头
1065浏览 • 1回复 待解决
HarmonyOS 本地H5加载
482浏览 • 1回复 待解决
HarmonyOS Web组件加载H5白屏
434浏览 • 1回复 待解决
HarmonyOS Web本地资源跨域加载异常
176浏览 • 1回复 待解决
HarmonyOS web资源跨域问题
214浏览 • 1回复 待解决
HarmonyOS web组件关闭跨域拦截
208浏览 • 1回复 待解决
HarmonyOS Web组件加载VUE3打包的H5资源白屏无法显示
925浏览 • 1回复 待解决
HarmonyOS Web加载本地沙箱资源H5文件报错
405浏览 • 1回复 待解决
HarmonyOS web与H5交互
1164浏览 • 1回复 待解决
Web组件如何访问跨域资源?
604浏览 • 1回复 待解决
HarmonyOS h5容器@State修饰枚举值,枚举值后续三目运算时赋值为undefined
356浏览 • 1回复 待解决
HarmonyOS web组件如何监听h5内部的router跳转
494浏览 • 1回复 待解决
HarmonyOS web离线加载请求跨域问题
870浏览 • 1回复 待解决
HarmonyOS webview组件跨域问题
252浏览 • 1回复 待解决
HarmonyOS Web组件加载在线H5页面
593浏览 • 1回复 待解决
HarmonyOS web组件如何监听到H5的页面跳转
404浏览 • 1回复 待解决
HarmonyOS 本地webView跨域方案
1398浏览 • 1回复 待解决
HarmonyOS 在h5前端侧调用应用侧方法
311浏览 • 2回复 待解决
代码中拦截器对dataPath进行处理下,就能成功跳转到detail。
处理的代码类似下面示例:
web组件的src跳转的url还为xxx./index.html/#/detail具体的页面,但是setResponseData中是index.html页面
setResponseData方法的参数描述:要设置的资源响应数据。string表示HTML格式的字符串。number表示文件句柄, 此句柄由系统的Web组件负责关闭。 Resource表示应用rawfile目录下文件资源。 ArrayBuffer表示资源的原始二进制数据。
rawfile目录下并没有/index.html/#/detail文件