HarmonyOS Web组件加载本地资源目录resource/rawfile下的html文件，页面内https请求报跨域问题

Web组件加载本地资源目录resource/rawfile下的html项目文件，我以这样的url：resource://rawfile/www/app/templates/zbkq/attendance_user_record.html传给web加载页面是成功了。

但此时web页面内发起了这样的https请求：https://dev.xxx.cn/third/microapp/get.htm?version=V1.0&microId=11 出现了跨域问题而报错。

解决跨域我所知道的是：在web的onInterceptRequest回调里拦截http请求，然后原生代码来请求到数据后塞给WebResourceResponse对象返回给web。

我这样做了，但js端还是报错误： Access to XMLHttpRequest at ‘resource://rawfile/www/app/templates/zbkq/attendance_user_record.html’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, arkweb, data, chrome-extension, chrome, https, chrome-untrusted.

另外在onInterceptRequest回调里我捕捉到：在一个正常httpsGET请求前会先来一个OPTIONS请求，该OPTIONS请求我没做任何处理

我该怎样做才能解决该跨域问题?

HarmonyOS

FengTianYa

2024-12-25 15:27:13

浏览

回答 1

待解决

回答 1

按赞同

按时间

superinsect

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

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

//main/ets/pages/index.ets

import web_webview from '@ohos.web.webview'

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  // 构造域名和本地文件的映射表
  schemeMap = new Map([
    [""xxxxx"", ""index.html""],
  [""xxxxx"", ""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.huawei.com为例。
        Web({ src: ""https://www.huawei.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>

//main/resources/rawfile/js/script.js

const body = document.body;
const element = document.createElement('div');
element.textContent = 'success';
body.appendChild(element);

2024-12-25 17:27:00

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Web组件加载本地资源目录resource/rawfile下的html文件，页面内https请求报跨域问题

订阅鸿蒙技术特刊，精选内容抢先看