从 Google 提供时为空的 amp-list答案

【问题标题】：Empty amp-list when served from Google从 Google 提供时为空的 amp-list
【发布时间】：2018-11-30 15:52:55
【问题描述】：

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

问题是：amp-list 为空，未填充。

请自行查看：

访问https://m.graphiccompetitions.com/（这是我们的移动/放大器版本。你会看到一切正常）
现在请在您的手机上搜索（在 google 上）“图形比赛”。我们的网站是搜索结果中的第一个。您会在我们的网址旁边看到 AMP 徽标。
点击搜索结果。 Google 会立即为您提供我们的 AMP 网站。但是...它是空的！！！没有显示任何文章。

当您搜索“插图比赛”时，也会出现相同的行为。 Google 将为您提供我们的 AMP 版本 (https://m.graphiccompetitions.com/illustration)，但同样空。

为什么？？

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

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

为什么？？？

有什么想法或建议吗？ ????

【问题讨论】：

标签： amp-html

【解决方案1】：

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

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

访问获取 'https://m.graphiccompetitions.com/api/category_all.json?20181130&__amp_source_origin=https%3A%2F%2Fm.graphiccompetitions.com' 从原点'https://m-graphiccompetitions-com.cdn.ampproject.org'有被 CORS 策略阻止：没有“Access-Control-Allow-Origin”标头存在于请求的资源上。如果一个不透明的响应服务根据您的需要，将请求的模式设置为“no-cors”以获取资源禁用 CORS。

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

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

【讨论】：

【解决方案2】：

感谢詹姆斯为我们指明了正确的方向。这是我们找到的解决方案，直接使用 .htaccess （因为我们的 amp-list 直接指向一个预编译的 json 文件，以获得最大速度，所以没有机会使用 php 来设置-向上标题)

<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 现在已正确填充。 ?

希望这对其他人有帮助！

【讨论】：