webview中跨域问题解决方案

URL上下文中来自跨域的请求，因此在使用Web组件加载本地离线资源的时候，Web组件针对file协议和resource协议会进行跨域访问的拦截。当访问跨域资源的时候，可以在devtools控制台中看到如下报错：

”Access to script at 'xxx' from origin 'xxx' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, arkweb, data, chrome-extension, chrome, https, chrome-untrusted”.

HarmonyOS

橘猫bbt7

2024-05-26 17:41:42

浏览

回答 1

按赞同

按时间

噜啦噜啦嘞噜啦嘞

如果要成功访问这些跨域资源，需要使用http或者https等协议进行加载（需要自己构造仅供自己个人或者阻止使用的域名），并且使用Web组件的onInterceptRequest进行本地资源拦截替换。

以下结合实例说明如何解决本地资源跨域问题。

import web_webview from '@ohos.web.webview' 
  
@Entry 
@Component 
struct Index { 
  @State message: string = 'Hello World'; 
  webviewController: web_webview.WebviewController = new web_webview.WebviewController(); 
  // 构造域名和本地文件的映射表 
  schemeMap = new Map([ 
    ["https://www.example.com/index.html", "index.html"], 
    ["https://www.example.com/js/script.js", "js/script.js"], 
  ]) 
  // 构造本地文件和构造返回的格式mimeType 
  mimeTypeMap = new Map([ 
    ["index.html", 'text/html'], 
    ["js/script.js", "text/javascript"] 
  ]) 
  
  build() { 
    Row() { 
      Column() { 
        // 针对本地index.html,使用http或者https协议代替file协议或者resource协议，并且构造一个属于自己的域名， 
        // 本例中构造www.example.com为例。 
        Web({ src: "https://www.example.com/index.html", controller: this.webviewController }) 
          .javaScriptAccess(true) 
          .fileAccess(true) 
          .domStorageAccess(true) 
          .geolocationAccess(true) 
          .width("100%") 
          .height("100%") 
          .onInterceptRequest((event) => { 
            if (!event) { 
              return; 
            } 
            // 此处匹配自己想要加载的本地离线资源，进行资源拦截替换，绕过跨域 
            if (this.schemeMap.has(event.request.getRequestUrl())) { 
              let rawfileName: string = this.schemeMap.get(event.request.getRequestUrl())!; 
              let mimeType = this.mimeTypeMap.get(rawfileName); 
              if (typeof mimeType === 'string') { 
                let response = new WebResourceResponse(); 
                // 构造响应数据，如果本地文件在rawfile下，可以通过如下方式设置 
                response.setResponseData($rawfile(rawfileName)); 
                response.setResponseEncoding('utf-8'); 
                response.setResponseMimeType(mimeType); 
                response.setResponseCode(200); 
                response.setReasonMessage('OK'); 
                response.setResponseIsReady(true); 
                return response; 
              } 
            } 
            return null; 
          }) 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
}
<html> 
<head> 
         <meta name="viewport" content="width=device-width,initial-scale=1"> 
</head> 
<body> 
<script crossorigin src="./js/script.js"></script> 
</body> 
</html>
const body = document.body; 
const element = document.createElement('div'); 
element.textContent = 'success'; 
body.appendChild(element);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.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.

2024-05-27 22:24:27

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

发布

51CTO

51CTO博客

51CTO学堂

webview中跨域问题解决方案

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