谷歌地图在Firefox和Safari中不起作用

Question

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

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

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(内容安全策略(不允许你从域加载脚本 github.com。

您可以：

• 编辑content-security-policy标头以允许https://github.com加载。你可以从你的Apache/Nginx设置或PHP(如果你使用它(中做到这一点，但我更喜欢从web服务器配置中处理这些标头。
  • 还可以使用标头元标记管理 CSP
  • 由于您直接从 Github 提供服务，因此您可能需要更改默认 src，因为内容类型text/html。我不知道脚本 src 是否会处理它。
• 下载脚本并将其上传到服务器。像这样，它将从同一域加载，并且不应引发 CSP 错误。

也：

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