从 Google 提供时清空放大器列表

Question

当 从 Google 缓存和提供服务时，我们的 AMP 网站出现问题。

问题是：放大器列表为空，未填充。

大家自己看：

访问https://m.graphiccompetitions.com/（这是我们的mobile/amp版本。您会看到一切正常）
现在请在您的手机上搜索（在google）“图形竞赛” .我们的网站在搜索结果中排名第一。您会在 URL.
点击搜索结果。即刻 Google 将为您提供我们的 AMP 网站。但是... 它是空的！！！没有显示任何文章。

当您搜索示例 "illustration contests" 时，也会出现相同的行为。 Google 将为您提供我们的 AMP 版本 (https://m.graphiccompetitions.com/illustration)，但是，同样，空。

为什么？？

我们的 amp-list 有一个指向 .json 文件的 src。这是个问题吗？

同样，如果您直接访问该网站（例如插入其 URL），一切正常。但是当（在移动设备上）直接从 Google 提供服务时，放大器列表永远不会被填充。

为什么???

有什么想法或建议吗？

Answer 1

如果您从 AMP 缓存查看此页面，您会发现它是由于不兼容的 CORS 政策造成的：https://m-graphiccompetitions-com.cdn.ampproject.org/c/s/m.graphiccompetitions.com

你得到的错误是这个（我从浏览器控制台提取这个）

Access to fetch at 'https://m.graphiccompetitions.com/api/category_all.json?20181130&__amp_source_origin=https%3A%2F%2Fm.graphiccompetitions.com' from origin 'https://m-graphiccompetitions-com.cdn.ampproject.org' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

当 Google 缓存页面时，这些内部请求现在在技术上是跨域的，不再是您自己服务器的内部请求。您可以在无法从 cdn.ampproject.org 获取的错误中看到，您需要设置 CORS 策略以便 Google 可以访问内容。

您可以详细了解如何引入适用于 AMP 的政策 here。

Answer 2

感谢 James 为我们指明了正确的方向。这是我们找到的解决方案，直接使用 .htaccess（ 因为我们的 amp-list 直接指向 pre-compiled json 文件, 为了获得最大速度，所以没有机会使用 php 到 set-up headers)

<FilesMatch "\.(json)$" >
  Header set Access-Control-Allow-Credentials "true"
  Header set Access-Control-Allow-Origin "*"
  Header always set Access-Control-Allow-Methods "GET"
  Header set Access-Control-Allow-Source-Origin "https://m.graphiccompetitions.com"
  Header set Access-Control-Expose-Headers AMP-Access-Control-Allow-Source-Origin
  Header set AMP-Access-Control-Allow-Source-Origin "https://m.graphiccompetitions.com"
  Header set Access-Control-Max-Age: 43200
  Header set Cache-Control "private, no-cache"
</FilesMatch>

行Access-Control-Allow-Origin "*"可能不太理想，我们可以使用

Header always append Access-Control-Allow-Origin: "m-graphiccompetitions-com.cdn.ampproject.org"
Header always append Access-Control-Allow-Origin: "m-graphiccompetitions-com.cdn.cloudflare.com"
(and so on...)

但目前一个简单的星号就可以了（而且我们已经将 Access-Control-Allow-Methods 设置为仅 GET，无论如何）。

现在一切正常！当 Google 提供其缓存版本时，amp-list 现在已正确填充。

希望这对其他人有帮助！

从 Google 提供时清空放大器列表

Empty amp-list when served from Google

amp-html