Harmony鸿蒙应用开发：解决Web组件加载本地资源跨域

1

Web({ src: $rawfile("local.html"), controller: this.webviewController })

1

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

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

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

@Entry
@Component
struct Index {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  responseResource: WebResourceResponse = new WebResourceResponse();
  localMockUrl: string = 'http://myapp.local';

  aboutToAppear() {
    // 配置Web开启调试模式
    web_webview.WebviewController.setWebDebuggingAccess(true);
  }

  build() {
    Column() {
      Web({
        // TODO: 把 local.html 修改为你自己的 html 文件路径
        src: `${this.localMockUrl}/local.html`,
        controller: this.webviewController
      })
        .onInterceptRequest((event) => {
          if (event) {
            // 拦截页面请求
            const requestUrl = event.request.getRequestUrl()
            if (requestUrl.startsWith(this.localMockUrl)) {
              // 获取相对路径
              const relativePath = url.URL.parseURL(requestUrl).pathname.replace(/^//, '');
              const resource = $rawfile(relativePath);
              this.responseResource.setResponseData(resource);
              this.responseResource.setResponseEncoding('utf-8');
              let mimeType = "text/plain";
              if (relativePath.endsWith(".html")) {
                mimeType = "text/html";
              } else if (relativePath.endsWith(".css")) {
                mimeType = "text/css";
              } else if (relativePath.endsWith(".js")) {
                mimeType = "text/javascript";
              } else if (relativePath.endsWith(".png")) {
                mimeType = "image/png";
              } else if (relativePath.endsWith(".gif")) {
                mimeType = "image/gif";
              } else if (relativePath.endsWith(".svg")) {
                mimeType = "image/svg+xml";
              } else if (relativePath.endsWith(".pdf")) {
                mimeType = "application/pdf";
              } else {
                // TODO: 把你网页用到的所有静态资源的 mimeType 补充到上面这段逻辑中
              }
              this.responseResource.setResponseMimeType(mimeType);
              this.responseResource.setResponseCode(200);
              this.responseResource.setReasonMessage('OK');
              return this.responseResource;
            }
          }
          return null;
        })
    }
  }
}

1
2
3
4
5

// 把这个判断改成你实际判断服务端请求的方式
if (relativePath.startsWith("api/")) {
  // 如果路径以 api/ 开头，代表这是一个服务器请求，返回 null 代表不拦截
  return null;
}