HarmonyOS鸿蒙Next中如何在web组件中解决跨域问题？

HarmonyOS鸿蒙Next中如何在web组件中解决跨域问题？ 问题简述

在web组件中，声明web组件并加载本地html，本地html中以es6 module形式加载js。在真机中实际运行app，在pc上通过inspect发现报跨域错误，无法加载js

相应代码及目录结构如下，已做有关尝试，仍然无法解决

web组件

import web_webview from '@ohos.web.webview';

@Entry
@Component
struct ElsaComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  aboutToAppear() {
    // 配置web开启调试模式
    web_webview.WebviewController.setWebDebuggingAccess(true);
    try {
      web_webview.WebviewController.customizeSchemes([{
        schemeName: "http",
        isSupportCORS: true,
        isSupportFetch: true
      }]);
    } catch (error) {
      console.error(error);
    }
  }
  build() {
    Flex() {
      Web({src: $rawfile("elsa/xx.html"), controller: this.webviewController})
        .javaScriptAccess(true)
    }
  }
}

html

<script type="module" language="javascript">
    import {multiply} from "./build/rzy.js";
</script>

js

export function multiply(x, y) {
    return x * y;
};

资源文件目录如下 rzy.js位于 elsa/build内，xx.html位于elsa/内


更多关于HarmonyOS鸿蒙Next中如何在web组件中解决跨域问题？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

15 回复

接口BUG，官方修复中。

更多关于HarmonyOS鸿蒙Next中如何在web组件中解决跨域问题？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个导入问题，可以看一下导入时是否使用的是require.js 导入，require.js加载资源时会构建XMLHttpReuqest请求本地资源，导致跨域问题，可以在node_modules中找到requirejs的依赖，修改/env/lib/plugin/text.js中writeFile方法，增加对运行环境判断，如果是鸿蒙webview环境 调用jsbridge使用原生方法读取文件

同样的问题，大佬有解决方案了嘛

姓名: 张三
职业: 软件工程师
技能: Python, Java, C++
简介: 拥有超过10年的软件开发经验，熟悉多种编程语言和技术。

请问楼主有解决方案了吗？

我也遇到同样的问题，Web组件加载APP本地网页，CORS跨域检查不通过

请问这个问题你解决了吗？我也是加载本地网页，请求都是报跨域的问题。

有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html

参照 这篇文章 的解决办法，通过Web控件的onInterceptRequest属性劫持浏览器的网络请求，能完美解决加载本地网页的CORS跨域问题。

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

有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html

期待解决办法

同样遇到该问题，期待解决办法

在HarmonyOS鸿蒙Next中，Web组件的跨域问题可以通过配置WebViewConfig来解决。具体步骤如下：

  1. 设置WebViewConfig：在WebViewConfig中启用setAllowUniversalAccessFromFileURLs和setAllowFileAccessFromFileURLs，以允许跨域访问。

  2. 配置Web组件：在创建Web组件时，将配置好的WebViewConfig应用到Web组件中。

示例代码如下：

import webview from '@ohos.webview';

let webViewConfig: webview.WebViewConfig = {
    setAllowUniversalAccessFromFileURLs: true,
    setAllowFileAccessFromFileURLs: true
};

let webComponent = new webview.WebView(this, webViewConfig);

通过以上配置，Web组件将允许跨域请求，从而解决跨域问题。

在HarmonyOS鸿蒙Next中，解决Web组件跨域问题可以通过以下方法：

  1. 配置CORS：确保服务器端正确配置CORS（跨域资源共享），允许特定域名或所有域名访问资源。例如，设置Access-Control-Allow-Origin为*或具体域名。

  2. 使用代理服务器：在本地或服务器端设置代理服务器，将跨域请求转发到目标服务器，避免直接跨域请求。

  3. JSONP：对于GET请求，可以使用JSONP（JSON with Padding）技术，通过动态创建<script>标签绕过跨域限制。

  4. WebView配置：在Web组件中，通过WebView的setWebViewClient方法自定义请求处理逻辑，或使用WebView的setWebChromeClient处理跨域请求。

  5. HTTPS：确保使用HTTPS协议，某些浏览器对跨域请求的安全性要求较高。

通过这些方法，可以有效解决HarmonyOS鸿蒙Next中Web组件的跨域问题。

回到顶部