Google Maps无法在Firefox和Safari中使用

Question

我在Wordpress网站上遇到问题，在该网站上，谷歌地图没有专门在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服务器配置中处理这些标头。
  • 也可以使用header meta tag
  管理CSP
  • 直接从Github服务时，您可能需要更改default-src，因为content-type为text/html。我不知道script-src是否会处理。
• 下载脚本并将其上传到您的服务器。这样，它将从同一域加载，并且不应引发CSP错误。

也：

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