# WebInterceptor **Repository Path**: harmonyos_samples/web-interceptor ## Basic Information - **Project Name**: WebInterceptor - **Description**: ArkWeb提供了多种网络请求拦截相关能力，本示例基于onLoadIntercept()、onInterceptRequest()和WebSchemeHandler，实现了页面重定向、链接白名单配置、本地资源替换、自定义资源加载策略和配置公共请求头等典型开发场景。 - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 1 - **Created**: 2025-11-10 - **Last Updated**: 2025-12-01 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 实现基于Web组件的请求拦截功能 ## 项目简介 本实例基于onLoadIntercept()接口、onInterceptRequest()接口和WebSchemeHandler请求拦截器实现了Web组件的请求拦截功能， 并结合请求重定向、页面白名单配置、本地资源替换、自定义资源加载策略和配置公共请求头等典型实践场景给出实际应用案例， 帮助开发者更好地掌握Web组件请求拦截功能的选择和使用。 ## 效果预览 | | 请求重定向 | 页面白名单配置 | 本地资源替换 | 自定义资源加载策略 | 配置公共请求头 | |----------------|--------------------------------------------------|------------------------------------------------------|------------------------------------------------------|------------------------------------------------------|-----------------------------------------------| | 配置url | ![image](screenshots/device/RedirectRequest.png) | ![image](screenshots/device/PageWhitelist.png) | ![image](screenshots/device/LocalResource.png) | ![image](screenshots/device/CustomLoading.png) | ![image](screenshots/device/CommonHeader.png) | | 加载Web页面 | ![image](screenshots/device/RedirectRequestResult.png) | ![image](screenshots/device/PageWhitelistResult.png) | ![image](screenshots/device/LocalResourceResult.png) | ![image](screenshots/device/CustomLoadingResult.png) | ![image](screenshots/device/CommonHeaderResult.png) | ## 安装说明 为清晰地展示配置公共请求头场景下的响应信息，本示例搭建了一个本地服务端。将原始请求添加公共请求头后，转发到本地服务端，本地服务端会将该请求的请求头信息作为响应，返回给客户端。开发者可参考如下步骤启动本地服务端。 1. 搭建Node.js环境：本示例的服务端是基于Node.js实现的，如果本地已有Node.js环境可以跳过此步骤。 1. 检查本地Node.js环境：在本示例工程的根目录下打开DevEco Studio的Terminal，执行`node -v`命令，如果可以看到版本信息，说明已经具备Node.js环境。 ![image](screenshots/readme/node_version.png) 2. 如果本地没有Node.js环境，可以去Node.js官网上下载所需版本进行安装配置。 3. 配置完环境变量后，重新打开Terminal，输入`node -v`命令，如果可以看到版本信息，说明已安装成功。 2. 构建局域网环境：测试配置公共请求头场景时要确保运行服务端代码的电脑和测试机连接的是同一局域网。可以开一个个人热点，然后将测试机和运行服务端代码的电脑都连接该热点进行测试。 3. 运行服务端代码：在根目录下打开DevEco Studio的Terminal，执行`hvigorw startHeaderServer`命令，启动本地服务器。 ![image](screenshots/readme/start_server.png) 4. 连接服务器地址：将Terminal中Server URL后面的URL复制到[src/main/ets/common/CommonConstants.ets](./entry/src/main/ets/common/CommonConstants.ets)文件下的COMMON_HEADER_REQUEST_URL中，保存好后即可运行本工程进行测试。 ![image](screenshots/readme/server_url.png) 注：也可以直接运行本工程，在配置公共请求头页面的输入框中，手动输入运行服务端代码电脑的IP地址后进行访问请求。可以在Terminal中Local Network IP后面读取IP地址，或者在命令行工具中通过`ipconfig`命令查看IP地址。 ![image](screenshots/readme/local_network_ip.png) 5. 重启本地服务器：执行`hvigorw restartHeaderServer`命令。 6. 关闭本地服务器：执行`hvigorw stopHeaderServer`命令。 ## 使用说明 1. 进入请求重定向页面，在输入框中配置原始请求url和重定向url（已设置默认值），点击“加载Web网页”按钮发出请求，通过弹窗显示重定向url的请求响应。 2. 进入页面白名单配置页面，在输入框中配置白名单url和加载url（已设置默认值），点击“加载Web网页”按钮发出请求。如果加载url在白名单中，则通过弹窗显示请求响应；否则，需要授权跳转浏览器加载请求响应。 3. 进入本地资源替换页面，在输入框中配置请求url（已设置默认值），点击“加载Web网页”按钮发出请求。如果请求url符合页面下方说明的预置条件，则通过弹窗显示本地html页面；否则，通过弹窗正常加载url的请求响应。 4. 进入自定义资源加载策略页面，在输入框中配置请求url（已设置默认值），点击“加载Web网页”按钮发出请求。如果在Wi-Fi网络环境下，则通过弹窗显示请求url的图片资源；否则，通过弹窗显示本地占位图。 5. 进入配置公共请求头页面，在输入框中配置请求url（已设置默认值），点击“加载Web网页”按钮发出请求，通过弹窗显示添加公共请求头后的数据响应。 ## 工程目录 ``` ├──entry │ └──src │ └──main │ ├──ets │ │ ├──common │ │ │ ├──utils │ │ │ │ ├──Logger.ets // 日志工具类 │ │ │ │ └──RcpRequestForwarder.ets // RCP请求转发工具类 │ │ │ └──CommonConstants.ets // 静态常量数据 │ │ ├──component │ │ │ ├──NavAreaComponent.ets // 跳转下一级页面导航组件 │ │ │ ├──UrlInputComponent.ets // url输入框组件 │ │ │ └──WhitelistDialog.ets // 非白名单url跳转浏览器弹窗 │ │ ├──entryability │ │ │ └──EntryAbility.ets // 程序入口 │ │ ├──interceptors │ │ │ ├──CommonHeaderInterceptor // 配置公共请求头拦截器 │ │ │ │ ├──model │ │ │ │ │ └──CommonHeaderModel.ets // 配置公共请求头数据及相关处理 │ │ │ │ ├──view │ │ │ │ │ └──CommonHeaderView.ets // 配置公共请求头UI界面 │ │ │ │ └──viewmodel │ │ │ │ └──CommonHeaderViewModel.ets // 配置公共请求头UI和数据交互管理 │ │ │ ├──CustomLoadingStrategyInterceptor // 自定义资源加载拦截器 │ │ │ │ ├──model │ │ │ │ │ └──CustomLoadingStrategyModel.ets // 自定义资源加载数据及相关处理 │ │ │ │ ├──view │ │ │ │ │ └──CustomLoadingStrategyView.ets // 自定义资源加载UI界面 │ │ │ │ └──viewmodel │ │ │ │ └──CustomLoadingStrategyViewModel.ets // 自定义资源加载UI和数据交互管理 │ │ │ ├──LocalResourceInterceptor // 本地资源替换拦截器 │ │ │ │ ├──model │ │ │ │ │ └──LocalResourceModel.ets // 本地资源替换数据及相关处理 │ │ │ │ ├──view │ │ │ │ │ └──LocalResourceView.ets // 本地资源替换UI界面 │ │ │ │ └──viewmodel │ │ │ │ └──LocalResourceViewModel.ets // 本地资源替换UI和数据交互管理 │ │ │ ├──PageWhitelistInterceptor // 页面白名单配置拦截器 │ │ │ │ ├──model │ │ │ │ │ └──PageWhitelistModel.ets // 页面白名单配置数据及相关处理 │ │ │ │ ├──view │ │ │ │ │ └──PageWhitelistView.ets // 页面白名单配置UI界面 │ │ │ │ └──viewmodel │ │ │ │ └──PageWhitelistViewModel.ets // 页面白名单配置UI和数据交互管理 │ │ │ └──RedirectRequestInterceptor // 请求重定向拦截器 │ │ │ ├──model │ │ │ │ └──RedirectRequestModel.ets // 请求重定向数据及相关处理 │ │ │ ├──view │ │ │ │ └──RedirectRequestView.ets // 请求重定向UI界面 │ │ │ └──viewmodel │ │ │ └──RedirectRequestViewModel.ets // 请求重定向UI和数据交互管理 │ │ └──pages │ │ └──Index.ets // 首页 │ └──resources // 应用静态资源目录 ├──LocalServer // 本地服务器 ├──scripts │ └──commandTask.ts // 命令文件 └──hvigorfile.ts // 构建脚本 ``` ## 具体实现 1. 请求重定向：使用onLoadIntercept()对原始请求url进行拦截，通过WebviewController.load()加载重定向url。 2. 页面白名单配置：配置信任url白名单，对不信任的url使用onLoadIntercept()进行拦截，弹窗提示并跳转到浏览器中打开。 3. 本地资源替换：使用onInterceptRequest()对满足预置条件的url进行拦截，并将本地的H5页面设置给WebResourceResponse作为请求响应。 4. 自定义资源加载策略：使用connect相关接口判断当前是否处于wifi网络条件下，如果在非wifi网络环境下，则使用onInterceptRequest()对jpg和png格式的图片资源url进行拦截，并将本地的占位图设置给WebResourceResponse作为请求响应。 5. 配置公共请求头：使用WebSchemeHandler()对网络请求进行拦截，添加公共请求头后，使用RCP将请求转发到本地服务端。 ## 相关权限 允许使用Internet网络权限：ohos.permission.INTERNET。 允许应用获取数据网络信息权限：ohos.permission.GET_NETWORK_INFO。 ## 约束与限制 1. 本示例仅支持标准系统上运行，支持设备：华为手机。 2. HarmonyOS系统：HarmonyOS 6.0.0 Release及以上。 3. DevEco Studio版本：DevEco Studio 6.0.0 Release及以上。 4. HarmonyOS SDK版本：HarmonyOS 6.0.0 Release SDK及以上。