HarmonyOS web组件加载本地页面时如何避免页面内请求发送的网络请求因跨域而请求失败

现在需要以resource协议或者file协议加载本地页面，但是由于本地html内发送网络请求会自动在请求头内携带origin: “null”，导致跨域请求失败。

由于需要以resource协议或者file协议加载本地页面，https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-cross-origin-V5 这个文档介绍的方式是用不了的。也不希望在html页面内调用原生提供的方法。尝试了onInterceptRequest发现里面并不能去掉请求头里面origin，也获取不到请求体。

HarmonyOS

fox280

2025-01-09 17:57:12

浏览

回答 1

待解决

回答 1

按赞同

按时间

FengTianYa

使用setPathAllowingUniversalAccess，在resource目录下创建resfile文件夹放入index.html访问远程地址

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

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component struct WebComponent {
  controller: WebviewController = new webview.WebviewController();
  aboutToAppear() {
    // 配置Web开启调试模式
    webview.WebviewController.setWebDebuggingAccess(true);
  }
  build() {
    Row() {
      Web({ src: "", controller: this.controller })
        .onControllerAttached(() => {
          try {
            console.log(getContext().resourceDir+' 123')
            console.log(getContext().filesDir+' 123')
            // 设置允许可以跨域访问的路径列表
            this.controller.setPathAllowingUniversalAccess([ getContext().resourceDir, getContext().filesDir + "/example", ])
            this.controller.loadUrl("file://" + getContext().resourceDir + "/index.html")
          }
          catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
          }
        })
        .javaScriptAccess(true)
        .fileAccess(true)
        .domStorageAccess(true)
    }
  }
}

在resource目录下创建resfile文件夹

<!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="utf-8">
  <title>Demo</title>
  <p id="response"></p>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">
  <script>
  function getFile() {
    var file = "file:///data/storage/el1/bundle/entry/resources/resfile/js/script.js";
    var xmlHttpReq = new XMLHttpRequest();
    xmlHttpReq.onreadystatechange = function(){
      console.log("readyState:" + xmlHttpReq.readyState);
      console.log("status:" + xmlHttpReq.status);
      if(xmlHttpReq.readyState == 4){
        if (xmlHttpReq.status == 200) {
          // 如果ets侧正确设置路径列表，则此处能正常获取资源
          const element = document.getElementById('text');
          element.textContent = "load " + file + " success";
          document.getElementById('response').innerHTML = xmlHttpReq.responseText;
        }
        else {
          // 如果ets侧不设置路径列表，则此处会触发CORS跨域检查错误
          const element = document.getElementById('text');
          element.textContent = "load " + file + " failed";
        }
      }
    }
    xmlHttpReq.open("GET", 'https://www.huawei.com/');
    xmlHttpReq.send(null);
  }
  </script>
  </head>
  <body>
  <div class="page">
  <button id="example" onclick="getFile()">stealFile</button>
  </div>
  <div id="text"></div>
  </body>
  </html>

2025-01-09 20:00:49

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS web组件加载本地页面时如何避免页面内请求发送的网络请求因跨域而请求失败

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