HarmonyOS 鸿蒙Next Web组件加载网页跨域问题

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

HarmonyOS 鸿蒙Next Web组件加载网页跨域问题

web组件加载“resource://rawfile”下的本地H5页面，H5页面会去请求http的协议，请求报错，错误日志为"Access to XMLHttpRequest at ‘http://220.x.x.x:9900/xxx/ads/getInfo?platform=27&position=260’ from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource."，尝试在onInterceptRequest拦截请求添加’Access-Control-Allow-Origin’的httpHeader，但是没有效果，想问下这种应该如何解决，目前Android和iOS都没有问题

 


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

Harmonyos Next教程
2 回复
本地资源跨域拦截

出于安全因素的考虑，在ArkWeb内核中，不允许file协议或者resource协议访问URL上下文中来自跨域的请求，因此在使用Web组件加载本地离线资源的时候，Web组件针对file协议和resource协议会进行跨域访问的拦截。当访问跨域资源的时候，可以在devtools控制台中看到如下报错：

Access to script at 'xxx' from origin 'xxx' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, arkweb, data, chrome-extension, chrome, https, chrome-untrusted.

解决方案

如果要成功访问这些跨域资源，需要使用http或者https等协议进行加载（需要自己构造仅供自己个人或者阻止使用的域名），并且使用Web组件的onInterceptRequest进行本地资源拦截替换。

以下结合实例说明如何解决本地资源跨域问题。

main/ets/pages/index.ets

import web_webview from '[@ohos](/user/ohos).web.webview'

[@Entry](/user/Entry)

[@Component](/user/Component)

struct Index {

  [@State](/user/State) message: string = 'Hello World';

  webviewController: web_webview.WebviewController = new web_webview.WebviewController();

  // 构造域名和本地文件的映射表

  schemeMap = new Map([

    ["https://www.example.com/index.html", "index.html"],

    ["https://www.example.com/js/script.js", "js/script.js"],

  ])

  // 构造本地文件和构造返回的格式mimeType

  mimeTypeMap = new Map([

    ["index.html", 'text/html'],

    ["js/script.js", "text/javascript"]

  ])

  build() {

    Row() {

      Column() {

        // 针对本地index.html,使用http或者https协议代替file协议或者resource协议，并且构造一个属于自己的域名，

        // 本例中构造www.example.com为例。

        Web({ src: "https://www.example.com/index.html", 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())) {

              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%')

  }

}

main/resources/rawfile/index.html

<html>

<head>

    <meta name="viewport" content="width=device-width,initial-scale=1">

</head>

<body>

<script crossorigin src="./js/script.js"></script>

</body>

</html>

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


HarmonyOS 鸿蒙Next Web组件在加载网页时遇到的跨域问题，通常源于浏览器的同源策略（Same-Origin Policy），这一策略限制了不同源（协议、域名、端口任一不同）之间的资源交互。在鸿蒙Next Web组件中，如果尝试从一个源加载并执行另一个源的脚本或资源，就可能触发跨域限制。

解决此类问题的方法包括但不限于：

  1. CORS配置：确保服务器正确配置了CORS（跨来源资源共享）头部，允许来自特定源的请求。这需要在服务器端进行设置，如添加Access-Control-Allow-Origin等HTTP头。

  2. JSONP或WebSockets：作为替代方案，可以使用JSONP（仅支持GET请求）或WebSockets进行跨域数据交换，这些技术不受同源策略限制。

  3. 代理服务器：设置代理服务器，将跨域请求转发到目标服务器，再由代理服务器返回响应给前端，以此规避跨域问题。

  4. 配置鸿蒙组件：检查鸿蒙Next Web组件的文档，看是否有提供特定的配置选项或API来处理跨域问题。

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

回到顶部