HarmonyOS Web组件加载本地H5页面，页面中接口请求被跨域规则限制，如何解除跨域限制

Web组件加载本地H5页面，页面中接口网络请求被跨域规则限制，如何解除跨域限制

跨域报错信息：

Access to XMLHttpRequest at ‘https://xxx.cn/dmbl/api.php?service=config’ from origin ‘null’ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header contains multiple values ‘*, *’, but only one is allowed.

HarmonyOS

aquaa

2024-12-25 13:55:58

浏览

回答 1

按赞同

按时间

zbw_apple

Web组件本地资源跨域问题

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-cross-origin-V5

使用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)
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

在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.index.com/');
    xmlHttpReq.send(null);
  }
  </script>
  </head>

  <body>
  <div class="page">
  <button id="example" onclick="getFile()">stealFile</button>
  </div>
  <div id="text"></div>
  </body>
  </html>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.

2024-12-25 17:28:34

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Web组件加载本地H5页面，页面中接口请求被跨域规则限制，如何解除跨域限制

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