ruby-on-rails - 使用 AWS Cloudfront 异步加载 Google map

Question

我的 google-map 仅在页面重新加载或 HTTP 重定向后异步加载。对于第一次加载，它不会出现——没有调用任何 javascript。

在Rails 开发模式下，它没有任何问题。同样，如果我在本地提供 Assets ， map 会在生产模式下异步加载。 但是当我配置 Amazon Web Services 的 Cloudfront CDN 时，它在第一个页面加载时失败。

这是调用 map 的 View 中的 javascript:

  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>


  <script type="text/javascript">

function initialize() {

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 4,
  streetViewControl: false,
  overviewMapControl: false,
  mapTypeControl: false,
  zoomControlOptions: {
    style: google.maps.ZoomControlStyle.DEFAULT,
  },
  center: new google.maps.LatLng(39.82, -98.58),
});


// Info Window Content
var infoWindowContent = <%= raw @content %>;
var locations = <%= raw @location %>;

 // Display multiple markers on a map

var infowindow = new google.maps.InfoWindow(), marker, i;

var marker, i;
var markers = new Array();

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  markers.push(marker);

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(infoWindowContent[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

}
   function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
    'callback=initialize';
document.body.appendChild(script);
  }

    window.onload =loadScript;
     </script>  

知道 AWS Cloudfront 上的代码可能出了什么问题吗？

Answer 1

哇。终于解决了这个问题。

有些地方出了问题。

首先，默认情况下，AWS S3 和 Cloudfront 不允许 CORS，即跨源资源共享。这意味着您不能调用任何一个提供的 AJAX 资源——它不会工作。也就是说，您可以将两者都配置为允许 CORS。为此，您需要编辑 S3 存储桶权限并添加 CORS 配置(AWS 在帮助页面上提供了很好的示例)。接下来，您需要将 Cloudfront 分配上的“Origin” header 列入白名单。这将允许云端将 Origin header 从请求转发到响应，并允许 CORS。 (我没有完全让它工作。查看 CORS 上的 AWS 帮助资源以获取更多信息)

其次，我注意到即使我的 AJAX 脚本是在本地提供的，而不是由 Cloudfront 提供的，但一个不同的 javascript 文件是:我的 Turbolinks js 文件。事实证明，Rails Asset Pipeline 需要的 Turbolinks gem 创建了一个 js 文件，最终被上传到我的发行版(application.js 文件中默认需要它)。如果您阅读 Turbolinks 文档，您会发现 Turbolinks 确保只重新加载 html 正文和头部标题。这是自述文件中的内容:

 "Instead of letting the browser recompile the JavaScript and CSS between each page
  change, it keeps the current page instance alive and replaces only the body and 
  the title in the head"

事实证明，Turbolinks 干扰了本地 AJAX 并阻止了 Google map 的异步加载。由于我避开了 AWS CORS 配置，我只是添加了关闭指向 Google map 页面的链接的 turbolinks 的选项:

data: { no_turbolink: true }

制作完整链接:

<%=link_to "/map", data: { no_turbolink: true } %>

没有 turbolinks，该页面永远不会使用 Cloudfront Turbolinks.js 文件调用，因此本地 AJax 可以加载 Google map 。

希望这对疲惫的旅行者有所帮助!