HarmonyOS 鸿蒙Next Web组件跨域问题

HarmonyOS 鸿蒙Next Web组件跨域问题 使用web组件加载本地html时，html中的fetch方法存在跨域有问题，但是XMLHttpRequest是不存在跨域问题的。

示例代码
1、html代码

// Make a GET request using fetch
const url = "http://192.168.21.30:8000/getName";

function withFetch() {
  fetch(url)
    .then(response => response.json())
    .then(data => {
      // Handle the response data
      console.log(data);
      document.getElementById("txt").innerHTML =
        data.name + " with Fetch";
    })
    .catch(error => {
      // Handle any errors
      console.error(error);
    });
}

function withXhr() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.send();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      console.log(xhr.responseText);
      document.getElementById("txt").innerHTML =
        xhr.responseText + " with XHR";
    }
  };
}

function crossFetch() {
  const url = "http://192.168.21.30:8000/getName2";
  fetch(url)
    .then(response => response.json())
    .then(data => {
      // Handle the response data
      console.log(data);
      document.getElementById("txt").innerHTML =
        data.name + " cross with Fetch";
    })
    .catch(error => {
      // Handle any errors
      console.error(error);
      document.getElementById("txt").innerHTML =
        error.message + " cross with Fetch";
    });
}

function crossXhr() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.send();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      console.log(xhr.responseText);
      document.getElementById("txt").innerHTML =
        xhr.responseText + " cross with XHR";
    }
  };
}

2、服务器端代码：

const http = require('http');

const server = http.createServer((req, res) => {
  if (req.url === '/getName') {
    res.setHeader('Content-Type', 'application/json');
    res.setHeader('Access-Control-Allow-Origin', '*'); // Allow all origins
    res.setHeader('Access-Control-Allow-Methods', 'GET'); // Allow only GET method
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); // Allow only Content-Type header
    res.end(JSON.stringify({ name: 'Moses' }));
  } else if (req.url === '/getName2') {
    res.end(JSON.stringify({ name: 'Moses2' }));
  } else {
    res.statusCode = 404;
    res.end('Not Found');
  }
});

const port = 9000;
server.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

ArkTs代码：

import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('loadUrl')
        .onClick(() => {
          try {
            // 点击按钮时，通过loadUrl，跳转到www.example1.com
            this.webviewController.loadUrl($rawfile('index.html'));
          } catch (error) {
            console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
          }
        })
      // 组件创建时，加载www.example.com
      Web({ src: 'https://baidu.com', controller: this.webviewController })
        .onErrorReceive(e => {
          console.log(e?.error.getErrorInfo())
        })
        .width("100%")
        .height("100%")
        .onPageEnd(e => {
          console.log("[moses]end:" + e?.url)
        })
        .onPageBegin(e => {
          console.log("[moses]begin:" + e?.url)
        })
        .onProgressChange(e => {
          console.log("[moses] onProgressChange:" + e?.newProgress)
        })// .constraintSize({ minHeight: 1 })
          // .backgroundColor(Color.Transparent)
        .javaScriptAccess(true)
        .horizontalScrollBarAccess(true)
        .verticalScrollBarAccess(true)
        .overviewModeAccess(true)// .textZoomRatio(1)
        .domStorageAccess(true)
        .imageAccess(true)
        .geolocationAccess(true)
        .onlineImageAccess(true)
        .databaseAccess(true)
        .zoomAccess(true)
        .onGeolocationShow(e => {
          console.log("[moses] onGeolocationShow:" + e?.origin)
        })

    }
  }
}

希望Fetch作为本地加载也能跨域