HarmonyOS 鸿蒙Next Web组件本地资源跨域问题,不支持Vue3打包的H5工程
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
https://developer.huawei.com/consumer/cn/forum/topic/0203159113348965189?fid=0109140870620153026
能提供具体的demo吗?方便进一步定位
在客户内网器,不太方便呀,不过现在参考官方和其他小伙伴的方案解决了
好的 解决了就行
两个方案都试了,没有效果,不知道是不是哪里整错了
针对HarmonyOS 鸿蒙Next Web组件本地资源跨域问题,不支持Vue3打包的H5工程的情况,以下是一些解决方案:
- 构造虚拟域名:由于ArkWeb内核不允许file协议或resource协议访问跨域请求,可以通过构造虚拟域名的方式加载本地资源,规避跨域问题。
- 开启DOM存储权限:若Vue3打包的H5工程中使用了localstorage,需要确保Web组件已开启dom存储权限,即添加
.domStorageAccess(true)
。 - 自定义协议:使用WebView的
customizeSchemes
接口自定义协议,并设置isSupportCORS
为true,赋予跨域权限。同时,在onInterceptRequest
方法中拦截并处理请求,返回自定义协议下的资源。
如果上述方法均无法解决问题,可能是由于Web组件或Vue3框架的兼容性问题,建议检查相关文档或更新版本。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html。