在Cordova项目中使用Google Maps JavaScript API的白名单配置求助

嘿，我来帮你搞定这个配置！要在Cordova里顺利用上Google Maps JS API，白名单配置确实是绕不开的关键步骤，我把具体操作拆成清晰的几步，你跟着来就行：

1. 先安装Cordova白名单插件 #

Cordova 4.0版本之后，白名单功能依赖官方的cordova-plugin-whitelist插件，先确保你已经安装了它：

cordova plugin add cordova-plugin-whitelist

2. 配置config.xml中的白名单规则 #

打开你的config.xml，在<widget>标签内部添加以下规则，这些配置会允许你的App访问Google Maps所需的所有核心资源域名：

<!-- 允许访问Google Maps核心API域名 -->
<access origin="https://maps.googleapis.com" />
<!-- 允许访问Google Maps的静态资源（地图瓦片、图标等） -->
<access origin="https://maps.gstatic.com" />
<!-- 允许访问Google字体（Maps可能会用到相关字体样式） -->
<access origin="https://fonts.googleapis.com" />
<!-- 允许访问Google字体的静态资源文件 -->
<access origin="https://fonts.gstatic.com" />

<!-- 允许WebView导航到上述域名（部分场景下需要这条配置） -->
<allow-navigation href="https://maps.googleapis.com/*" />
<allow-navigation href="https://maps.gstatic.com/*" />
<allow-navigation href="https://fonts.googleapis.com/*" />
<allow-navigation href="https://fonts.gstatic.com/*" />

如果你只是做测试（不推荐生产环境），可以用通配符暂时允许所有HTTPS域名：

<access origin="https://*" />

3. 添加内容安全策略（CSP）Meta标签 #

这一步很容易被忽略！你需要在www/index.html的<head>标签里添加CSP规则，明确允许加载Google Maps的脚本和资源：

<meta http-equiv="Content-Security-Policy" content="
    default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval';
    script-src 'self' https://maps.googleapis.com 'unsafe-inline' 'unsafe-eval';
    style-src 'self' https://fonts.googleapis.com 'unsafe-inline';
    img-src 'self' data: https://maps.gstatic.com https://fonts.gstatic.com;
    font-src 'self' https://fonts.gstatic.com;
">

简单解释下关键规则：

• script-src里加入https://maps.googleapis.com：允许加载Google Maps的核心JS脚本
• style-src加入https://fonts.googleapis.com：允许加载地图用到的字体样式
• img-src加入对应域名：允许加载地图瓦片和字体图片文件

4. 验证配置 #

配置完成后，重新构建你的Cordova项目：

cordova build android  # 针对Android平台，iOS则用 cordova build ios

之后运行App测试Google Maps是否能正常加载。

如果还是有问题，可以检查：

• 确认你的Google Maps API密钥有效，并且已经启用了JavaScript API服务
• 用Chrome远程调试工具查看App的控制台日志，看看是否有具体的域名拦截提示，再针对性补充白名单规则

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