HarmonyOS Web跨域，C++ 层如何给请求Header增加Access-Control-Allow-Origin -

我们项目需要的是拦截【https://localhost】域名所加载的 H5 页面发起的接口请求，并在请求的 Header 增加字段 setHeader(“Access-Control-Allow-Origin”, “file://”) 处理

请问这种方式怎么实现呢？

HarmonyOS

zbw_apple

2024-12-25 14:38:31

浏览

回答 1

待解决

回答 1

按赞同

按时间

Heiang

示例参考如下：

使用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文件夹

<!-- index.html -->
  <!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>

2024-12-25 17:28:06

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Web跨域，C++ 层如何给请求Header增加Access-Control-Allow-Origin -

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