Cordova Android App加载外部站点时第三方域名图片无法加载原因

这情况我碰到过好几次，核心问题出在Cordova WebView的安全策略限制上，具体拆解成这几个关键点：

1. Content Security Policy (CSP) 配置未授权外部域名 #

虽然你的网站在普通浏览器里能正常加载yyy.com的图片（说明网站本身的CSP已经允许跨域资源），但Cordova的WebView会叠加自身的安全规则——当你通过Cordova加载远程站点时，WebView可能会应用默认的严格CSP，没有明确授权yyy.com的图片加载权限。

你需要在远程站点的HTML头部补充针对性的CSP规则，比如：

<meta http-equiv="Content-Security-Policy" content="img-src 'self' yyy.com data:;">

这里'self'对应你的xxx.com域名，yyy.com就是允许加载的外部图片源，data:是额外允许base64格式的图片（如果你的站点用到的话）。

2. Cordova网络访问白名单未配置 #

Cordova默认会限制WebView访问外部域名，你必须在项目的config.xml里添加规则，授权yyy.com的资源访问权限：

<!-- 允许WebView导航到yyy.com的资源 -->
<allow-navigation href="https://yyy.com/*" />
<!-- 允许通过intent跳转yyy.com（如果有相关需求） -->
<allow-intent href="https://yyy.com/*" />
<!-- 允许直接请求yyy.com的网络资源 -->
<access origin="https://yyy.com/*" />

这三个标签分别管控不同层面的网络权限，确保yyy.com的图片能被WebView正常请求。

3. Android WebView的混合内容拦截（若适用） #

如果你的xxx.com是HTTPS协议，而yyy.com的图片用的是HTTP协议，Android WebView默认会直接拦截这种“混合内容”（普通浏览器可能会提示但允许加载，WebView则严格阻止）。

解决办法二选一：要么把yyy.com的图片切换为HTTPS协议，要么在config.xml里添加Android平台配置，允许混合内容加载：

<platform name="android">
    <preference name="AndroidInsecureFileModeEnabled" value="true" />
    <!-- 针对Android 9及以上版本，需额外添加这条 -->
    <preference name="MixedContentMode" value="0" />
</platform>

MixedContentMode的0值表示允许所有混合内容的加载。

额外验证点 #

• 确认yyy.com的服务器没有设置X-Frame-Options或CORS规则拦截Cordova WebView的请求（不过浏览器能正常加载的话，这点大概率没问题）；
• 修改配置后记得重新构建Cordova项目（执行cordova build android），确保新配置生效。

内容的提问来源于stack exchange，提问作者rahulb