HarmonyOS 本地webView跨域方案

我在rawfile中添加一个H5的站点源码，包含html、css、js。然后使用webview去加载这个本地站点（resource或者file协议），

这个H5网页会去加载一些远程的资源文件(图片、js、css)，也会去请求一些接口

问题：

对于图片、js、css不存在跨域的问题，但是请求的接口（get、post等），就会出现跨域问题。

当然可以利用onInterceptRequest事件去拦截，然后利用native的方法实现接口请求

但是onInterceptRequest会拦截所有的请求，而我的目的只是为了让那些存在跨越问题的请求能够正确得到response，而不希望去拦截那些不存在跨越问题的请

好像没有好的办法去区分哪些请求存在跨域问题，哪些请求不存在跨域问题。

是否有什么开关可以让webview允许跨域

（仅限前端实现，无法要求后端修改接口来允许跨域）

HarmonyOS

put_get

2024-09-05 10:54:28

浏览

已于2024-9-5 18:41:33修改

回答 1

按赞同

按时间

superinsect

可以使用web组件的loadData接口，用于加载指定的数据，该接口的参数baseUrl可以实现：入参baseUrl可以指定的一个URL路径（“http”/“https”/"data"协议），并由Web组件赋值给window.origin。通过该接口更改协议可以解决跨域问题。

web_webview.WebviewController.customizeSchemes([{schemeName: “abc”, isSupportCors: true, isSupportFetch: true}]);1.

通过customizeSchemes接口，isSupportCORS表示是否支持跨域请求。schemeName表示自定义协议名称。

示例代码：

aboutToAppear(): void { 
  try { 
  web_webview.WebviewController.customizeSchemes([{ 
    schemeName: “abc”, 
    isSupportCORS: true, 
    isSupportFetch: true 
  }]); 
} catch (error) { 
  console.error(ErrorCode: ${error.code}, ErrorMessage: ${error.message}); 
} 
} 
build() { 
  Column() { 
    Web({ src: $rawfile(“local.html”), controller: this.controller }) 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.