#鸿蒙通关秘籍#如何解决Web组件本地资源跨域问题？

ArkWeb内核为了安全性不允许使用file或resource协议访问URL上下文中的跨域请求。此问题的解决方案如下：使用http或https协议来替代file或resource协议加载本地资源。例如，构造自己的域名来替代真实域名，通过Web组件的onInterceptRequest方法拦截请求，并进行资源替换。

typescript import { webview } from '@kit.ArkWeb';

@Entry @Component struct Index { @State message: string = 'Hello World'; webviewController: webview.WebviewController = new webview.WebviewController();

schemeMap = new Map([ ["https://www.example.com/index.html", "index.html"], ["https://www.example.com/js/script.js", "js/script.js"], ]);

mimeTypeMap = new Map([ ["index.html", 'text/html'], ["js/script.js", "text/javascript"] ]);

build() { Row() { Web({ src: "https://www.example.com/index.html", controller: this.webviewController }) .onInterceptRequest((event) => { if (this.schemeMap.has(event.request.getRequestUrl())) { let rawfileName = this.schemeMap.get(event.request.getRequestUrl())!; let mimeType = this.mimeTypeMap.get(rawfileName); let response = new WebResourceResponse(); response.setResponseData($rawfile(rawfileName)); response.setResponseEncoding('utf-8'); response.setResponseMimeType(mimeType); response.setResponseCode(200); response.setReasonMessage('OK'); response.setResponseIsReady(true); return response; } return null; }); } } }