HarmonyOS 鸿蒙Next H5桥接涉及第三方页面跳转请求失败问题

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

HarmonyOS 鸿蒙Next H5桥接涉及第三方页面跳转请求失败问题

H5桥接鸿蒙,使用鸿蒙模板,将H5打包放入web组件中,杀掉进程再进应用或者从第三方页面再跳转回应用接口请求失败

  1. 登录应用进入应用之后再杀掉进程重新进入或者从应用跳转到第三方页面再返回来,接口请求失败

  2. 没有走鸿蒙的request,报错Access to XMLHttpRequest at ‘xxxx网址’ from origin ‘null’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.


更多关于HarmonyOS 鸿蒙Next H5桥接涉及第三方页面跳转请求失败问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

根据你上面的报错可能是跨域问题,您可以尝试通过customizeSchemes接口设置web_webview.WebviewController.customizeSchemes([{schemeName: "abc", isSupportCors: true, isSupportFetch: true}]);isSupportCORS表示是否支持跨域请求。schemeName表示自定义协议名称。

参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-webview-V5#customizeschemes

除了设置schema方式,还有下面两种方式可以参考:

  1. 如果跨域请求较多请使用setPathAllowingUniversalAccess

参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-webview-V5#setpathallowinguniversalaccess12

  1. 还可以尝试拦截返回的方式:
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct Index {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  schemeMap = new Map([
    ["https://www.excample.com/", "kuayu1.html"]
  ])
  // 构造本地文件和构造返回的格式mimeType
  mimeTypeMap = new Map([
    ["kuayu1.html", 'text/html']
  ])

  build() {
    Row() {
      Column() {
        Web({ src: 'https://www.cxzly.com/', controller: this.webviewController })
          .javaScriptAccess(true)
          .fileAccess(true)
          .domStorageAccess(true)
          .geolocationAccess(true)
          .width("100%")
          .height("100%")
          .onInterceptRequest((event) => {
            if (!event) {
              return;
            }
            // 此处匹配自己想要加载的本地离线资源,进行资源拦截替换,绕过跨域
            if (this.schemeMap.has(event.request.getRequestUrl())) {
              console.log(event.request.getRequestUrl() + ' 123456')
              let rawfileName: string = this.schemeMap.get(event.request.getRequestUrl())!;
              let mimeType = this.mimeTypeMap.get(rawfileName);
              if (typeof mimeType === 'string') {
                let response = new WebResourceResponse();
                // 构造响应数据,如果本地文件在rawfile下,可以通过如下方式设置
                response.setResponseData($rawfile(rawfileName));
                response.setResponseEncoding('utf-8');
                response.setResponseMimeType(mimeType);
                response.setResponseCode(200);
                response.setReasonMessage('OK');
                response.setResponseIsReady(true);
                return response;
              }
            }
            return null;
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next H5桥接涉及第三方页面跳转请求失败问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对HarmonyOS鸿蒙Next H5桥接涉及第三方页面跳转请求失败的问题,这通常可能是由于以下几个原因导致的:

  1. 权限配置问题:确保应用已正确配置所需权限,包括网络访问权限和跳转外部应用的权限。检查manifest.json或相应的配置文件,确认是否已声明相关权限。

  2. URL格式错误:检查第三方页面的URL是否正确无误,包括协议(http/https)、域名、路径及查询参数等。错误的URL格式可能导致跳转失败。

  3. 第三方应用问题:若第三方应用存在兼容性问题或已下架,也可能导致跳转失败。尝试在原生浏览器或其他应用中访问该URL,确认其有效性。

  4. 鸿蒙系统限制:鸿蒙系统可能对某些类型的跳转或外部应用访问有所限制。查阅鸿蒙系统的官方文档,了解是否有相关限制或变更。

  5. 桥接框架问题:H5桥接框架本身可能存在bug或不支持某些特定场景。检查是否有最新的框架更新或补丁,以及社区中是否有类似问题的讨论。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部