生产环境下@react-google-maps/api脚本加载失败问题求助

问题根源 #

报错信息明确显示，内容安全策略（CSP）规则阻止了谷歌地图脚本的加载——当前CSP的script-src指令仅允许加载同源（'self'）和内联脚本（'unsafe-inline'），未包含谷歌地图的脚本域名，导致地图API无法正常加载，useLoadScript的isLoaded始终返回false。

解决步骤 #

1. 更新Content Security Policy配置 #

需要在CSP的script-src中添加谷歌地图相关的域名：

• https://maps.googleapis.com：核心地图API脚本域名
• https://maps.gstatic.com：地图依赖的静态资源域名

根据项目构建方式，修改对应配置：

• Create React App项目：打开public/index.html，找到CSP的meta标签（无则新增），更新内容：

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

  注：可根据项目实际需求补充其他资源规则，比如样式、字体等。

• 自定义构建工具（Webpack/Vite等）：在对应的CSP配置项中，给script-src追加上述两个域名。

2. 检查API Key配置 #

注意代码中环境变量的拼写：process.env.REACT_APP_GOOGLE_MAPS_KEy最后一个字母为y，正确变量名应为REACT_APP_GOOGLE_MAPS_KEY（结尾为KEY），需确保变量名与.env文件中的定义完全一致，避免API Key未正确加载。

3. 验证效果 #

重新构建生产环境代码并部署，确认谷歌地图脚本可正常加载，useLoadScript返回的isLoaded变为true，地图组件能正常渲染。

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