电子邮件的 AMP 列表无法加载示例 json答案

【问题标题】：AMP-list for email fail to load sample json电子邮件的 AMP 列表无法加载示例 json
【发布时间】：2020-11-24 09:09:56
【问题描述】：

我是 AMP 新手，我是一名创意设计师，因此我对前端后端的了解有限。我试图做一个 AMP 电子邮件，它从 json 加载信息并将其显示在电子邮件中。

我正在使用来自https://amp.dev/documentation/components/amp-list/?format=email 的示例 AMP-list 组件脚本，一切正常，但是当我用我的示例文件替换 json 链接时它不起作用https://wegoexperience.com/dest.json

谁能告诉我为什么？谢谢！

【问题讨论】：

能否发布您使用的无效的 AMP HTML 标记？没有那条信息，这里的人们无法真正提供建议。快速浏览一下，您的 JSON 项目包含 img 和 dest 等属性，它们与 amp.dev 文档中提供的任何 JSON 都不匹配（例如，title、item、price） .这意味着您的 JSON 无法替代该页面提供的示例 AMP HTML，您很可能需要调整 Mustache 模板以考虑您自己的 JSON 属性。

标签： json amp-email amp-list

【解决方案1】：

答案：都是关于 CORS，请在此处阅读：https://amp.dev/documentation/guides-and-tutorials/learn/cors-in-email/

在https://amp.dev/ 的沙盒中，您将无法检查自己的 JSON。

如果您有 Apache 服务器，则创建（在 JSON 文件所在的文件夹中）.htaccess 文件并在其中编写以下代码：

Header add Access-Control-Allow-Origin: "*"
Header add AMP-Access-Control-Allow-Source-Origin: "youaddress@youdomain.com"
Header add Access-Control-Expose-Headers: "AMP-Access-Control-Allow-Source-Origin"

之后，如果您在本地或服务器上进行测试，AMP-list 应该可以工作。

【讨论】：