本文同步发表于我的微信公众号，微信搜索 程语新视界 即可关注，每个工作日都有文章更新

       鸿蒙中Web组件默认是禁止加载HTTPS和HTTP混合内容（Mixed Content），导致HTTP图片等资源被拦截。需满足两个前提：

1. 已申请网络权限：在module.json5中添加权限声明。
2. 资源链接可访问：确认HTTP资源在浏览器中能正常加载。

"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]

方案 一：启用混合内容加载（推荐） 通过MixedMode配置允许加载HTTP资源：

import { webview } from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  aboutToAppear() {
    // 关键配置：启用混合内容加载
    webview.WebviewController.setWebMixedMode(MixedMode.All); 
  }

  build() {
    Column() {
      Web({ 
        src: "https://your-website.com", // 替换为实际URL
        controller: this.controller 
      })
    }
  }
}

或者：

import { webview } from '@kit.ArkWeb';
import { MixedMode } from '@kit.ArkWeb'; // 引入MixedMode枚举

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();
   

  build() {
    Column() {
      Web({ src: 'https://your-url.com', controller: this.controller })
        .mixedMode(MixedMode.All) // 设置为允许所有混合内容
    }
  }
}

参数说明：

• MixedMode.All：允许加载所有HTTP/HTTPS混合内容（最高权限）。
• MixedMode.Compatible：仅允许加载图片/音频/视频（推荐安全方案）。
• MixedMode.None：完全禁止混合内容（默认值）。

方案二：升级资源为HTTPS

将所有HTTP资源链接替换为HTTPS，从根本上解决混合内容安全问题。

注意事项

1. 安全警告：MixedMode.All会降低安全性，仅建议在可信环境中使用。
2. API兼容性：
   • setWebMixedMode()需API 9+。
   • 若需设置代理，可用webview.ProxyController.applyProxyOverride()（API 15+）。
3. 代理配置：应用级代理（如connection.setAppHttpProxy）会同时作用于Web组件的网络请求。