Create React App - 阻止 Google Maps API 的内容安全策略

Question

我正在使用 Create React App 和 Google Maps API (react-google-maps-api)。由于与内容安全策略相关的错误，地图组件无法正常工作。

我做了一些事情来尝试解决这个问题：

1. 在 React App 的 .env 文件中设置 INLINE_RUNTIME_CHUNK=false
2. 创建了一个 CSP（使用说明来自：https://medium.com/@nrshahri/csp-cra-324dd83fe5ff）

索引文件中的CSP，构建后为：

<meta http-equiv="Content-Security-Policy" 
content="base-uri 'self'; 
object-src 'none'; script-src 'self' *.googleapis.com 'nonce-vU1URW3TCRPEJ0bwj+Z9Ig=='; 
style-src https://fonts.googleapis.com 'nonce-5pWVpmiuZWCKu1UNllyTwQ=='; 
default-src 'self' ; img-src 'self' *.googleapis.com *.gstatic.com *.google.com *.googleusercontent.com data:; 
script-src-elem 'self' *.googleapis.com; 
frame-src *.google.com; connect-src 'self' *.googleapis.com *.google.com *.gstatic.com data: blob:; 
font-src https://fonts.gstatic.com; worker-src blob:; 
manifest-src 'self'; 
style-src-elem 'self' https://fonts.googleapis.com">

这些更改后我得到的谷歌地图 API 错误是：

“拒绝加载脚本 'https://maps.googleapis.com/maps/api/js?key=&v=weekly&callback=initMap' 因为它违反了以下内容安全策略指令：“script-src 'self'” . 注意 'script-src-elem' 没有明确设置，所以 'script-src' 被用作后备。”

我不明白为什么错误将 script-src 简单地设置为“self”或者为什么它说“script-src-elem”尚未设置。

谢谢