谷歌地图无法在 Firefox 和 Safari 中运行

Question

我在一个 Wordpress 网站上遇到问题，其中 Google 地图无法在 Firefox 和 Safari 上专门加载。地图显示空白，并显示一条消息正在加载地图...在这两个浏览器上永远不会结束。

这条奇怪的黄色消息显示在 Google Chrome 的浏览器上：

jquery.min.js?ver=1.11.1:4 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://github.com/googlemaps/js-map-label/blob/gh-pages/src/maplabel.js?_=XXXXXXXXXX with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

在 Firefox 中，它还会以黄色警报的形式显示以下消息：

Loading failed for the <script> with source “https://github.com/googlemaps/js-map-label/blob/gh-pages/src/maplabel.js?_=XXXXXXXXX”.

关于它只适用于 Chrome 而不适用于 Firefox 和 Safari 的任何线索？有什么办法解决吗？

谢谢

Answer 1

由于错误，您的CSP (Content Security Policy) 不允许您从 github.com 域加载脚本。

你可以：

• 编辑您的content-security-policy 标头以允许https://github.com 加载。您可以通过 Apache/Nginx 设置或 PHP（如果您使用它）来执行此操作，但我更喜欢从 Web 服务器配置中处理这些标头。
  • CSP 也可以使用header meta tag 进行管理
  • 由于您直接从 Github 提供服务，您可能需要更改 default-src，因为内容类型为 text/html。我不知道script-src 是否会处理它。
• 下载脚本并将其上传到您的服务器。像这样，它将从同一个域加载，并且不应该抛出 CSP 错误。

还有：

• 直接使用来自 GitHub 的文件并不是最好的主意。如您所见 here 和控制台错误 with MIME type text/html，Github 将您的 JS 文件作为 text/html 而不是 application/javascript。
• 最好使用适当的 CDN（如果存在为您的文件提供服务的 CDN），或者将文件存储在您的服务器上。