Amp html 从Google提供时，amp列表为空

当缓存并从谷歌提供服务时，我们的AMP网站出现问题

问题是：amp列表为空，未填充

请自行查看：

访问（这是我们的手机/amp版本。您会看到一切正常）

现在，请使用手机（在谷歌上）搜索“图形比赛”。我们的网站是搜索结果的第一站。您将在我们的URL旁边看到AMP徽标

点击搜索结果。谷歌将立即为您提供我们的AMP网站。但是它是空的未显示任何文章

当您搜索例如“插图竞赛”时，也会出现相同的行为。谷歌将为您提供我们的AMP版本（），但同样，为空

为什么

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

同样，如果您直接访问网站（例如插入其URL），一切都可以正常工作。但是当（在手机上）直接从谷歌获得服务时，amp列表永远不会填充

为什么？

---

有什么想法或建议吗 如果从AMP缓存查看此页面，您可以看到这是由于不兼容的CORS策略造成的：

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

取 '' 来自源“”的 已被CORS策略阻止：没有“访问控制允许来源”标题 请求的资源上存在。如果一个不透明的回应有效 根据您的需要，将请求的模式设置为“no cors”以获取资源 CORS被禁用

当谷歌缓存页面时，从技术上讲，这些内部请求现在是跨来源的，不再是您自己服务器的内部请求。您可以在错误中看到它无法从

cdn.ampproject.org

获取内容，您需要设置您的CORS策略，以便Google可以访问内容

---

您可以了解有关如何引入与AMP一起工作的策略的更多信息

感谢詹姆斯为我们指明了正确的方向。这是我们找到的解决方案，直接使用.htaccess（因为我们的amp列表直接指向预编译的json文件，以获得最高速度，所以不可能使用php设置标题）

但目前，一个简单的星号就可以了（我们已经设置了

访问控制允许方法

只获取，无论如何）

现在一切都好了！当Google提供其缓存版本时，amp列表现在已正确填充。

<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>

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...)