#鸿蒙通关秘籍#如何使用鸿蒙Web组件本地资源跨域拦截器？

在鸿蒙平台中，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; }); } } }