HarmonyOS 鸿蒙Next Web组件本地资源跨域问题

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

HarmonyOS 鸿蒙Next Web组件本地资源跨域问题 web组件加载本地rawfile中的H5资源，跨域问题怎么解决

Harmonyos Next教程
2 回复

可以参考以下官网文档： https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-cross-origin-V5

示例代码：

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

@Entry
@Component
struct webViewDemo {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  responseweb: WebResourceResponse = new WebResourceResponse()

  aboutToAppear() {
    web_webview.WebviewController.setWebDebuggingAccess(true);
  }

  build() {
    Column () {

      Web({ src: 'http://www.exampletest.com/index.html', controller: this.webviewController })
        .onProgressChange((e) => {
          console.log('preivew onProgressChange', JSON.stringify(e))
        })
        .javaScriptAccess(true)
        .domStorageAccess(true)
        .verticalScrollBarAccess(true)
        .onInterceptRequest((event) => {
          if (event) {
            console.log('url:' + event.request.getRequestUrl())
            const url = event.request.getRequestUrl();
            const urlInfo = new uri.URI(url);
            if (urlInfo.host === 'www.exampletest.com') {
              console.log(urlInfo.path)
              if (urlInfo.path === '/index.html') {
                this.responseweb.setResponseData($rawfile('asset/index.html'))
                this.responseweb.setResponseEncoding('utf-8')
                this.responseweb.setResponseMimeType('text/html')
                this.responseweb.setResponseCode(200)
                this.responseweb.setReasonMessage('OK')
                return this.responseweb
              } else if (url.endsWith('css')) {
                this.responseweb.setResponseData($rawfile('asset' + urlInfo.path))
                this.responseweb.setResponseEncoding('utf-8')
                this.responseweb.setResponseMimeType('text/css')
                this.responseweb.setResponseCode(200)
                this.responseweb.setReasonMessage('OK')
                return this.responseweb
              } else if (url.endsWith('js')) {
                this.responseweb.setResponseData($rawfile('asset' + urlInfo.path))
                this.responseweb.setResponseEncoding('utf-8')
                this.responseweb.setResponseMimeType('text/javascript')
                this.responseweb.setResponseCode(200)
                this.responseweb.setReasonMessage('OK')
                return this.responseweb
              } else if (url.endsWith('png') || url.endsWith('jpg')) {
                this.responseweb.setResponseData($rawfile('asset' + urlInfo.path))
                this.responseweb.setResponseEncoding('utf-8')
                this.responseweb.setResponseMimeType('image/png')
                this.responseweb.setResponseCode(200)
                this.responseweb.setReasonMessage('OK')
                return this.responseweb
              } else {
                return null;
              }
            } else {
              return null;
            }
          } else {
            return null;
          }

        })
        .onErrorReceive((event) => {
          if (event) {
            console.log('reader onErrorReceive', event.error.getErrorCode(), event.error.getErrorInfo())
          }
        })
        .onHttpErrorReceive((event) => {
          console.log('reader onHttpErrorReceive', JSON.stringify(event?.response.getReasonMessage()))
        })
        .fileAccess(true)
        .zoomAccess(true)
        .domStorageAccess(true)
        .height('100%')
        .width('100%')
    }
    .height('100%')
    .width('100%')
  }
}

html：

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width,initial-scale=1,user-scalable=yes" name="viewport">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="format-detection" content="telephone=no,address=no">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="./static/css/index.css">
</head>
<script src="./static/js/index.js"></script>

<body>
<div>
hellow world
</div>
<div>
<img src="./static/img/test.png" alt="">
</div>
</body>
<script language="javascript">
console.log(4321)
</script>
</html>

更多关于HarmonyOS 鸿蒙Next Web组件本地资源跨域问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS 鸿蒙Next Web组件本地资源跨域问题通常涉及到Web组件在访问本地其他域资源时遇到的权限或策略限制。在鸿蒙系统中，这种跨域问题可能由于系统的安全机制或组件的加载方式导致。

解决鸿蒙Next Web组件本地资源跨域问题的一种方法是配置CORS（跨来源资源共享）策略。然而，由于鸿蒙系统的特殊性，传统的Web CORS配置可能不完全适用。你需要检查鸿蒙系统提供的API或配置选项，看是否有专门用于处理Web组件跨域问题的机制。

此外，确保你的Web组件和本地资源服务器都正确配置了相关的访问权限和安全策略。鸿蒙系统可能要求你明确指定哪些资源可以被哪些组件访问，这通常需要在组件的配置文件或系统安全设置中进行。

如果问题依旧存在，可能是因为鸿蒙系统的某些限制或bug导致的。此时，你可以尝试查阅鸿蒙系统的官方文档或社区论坛，看是否有其他开发者遇到并解决了类似的问题。

如果问题依旧没法解决请联系官网客服，官网地址是：

https://www.itying.com/category-93-b0.html

回到顶部