AMP for Email中amp-list无法从API端点获取数据的问题求助

针对你遇到的amp-list加载失败问题，从请求头和API配置角度给出以下排查和修复步骤：

1. 确认API必须返回的CORS响应头 #

AMP for Email对跨域请求有严格要求，你的API服务器必须返回以下关键响应头：

• Access-Control-Allow-Origin: *：由于邮件客户端属于第三方环境，无法固定请求来源，通配符*是最稳妥的设置
• Access-Control-Allow-Methods: GET：amp-list仅支持GET请求，必须明确允许
• Access-Control-Allow-Headers: Accept, Content-Type：确保允许AMP请求携带的标准头
• Content-Type: application/json：响应内容必须是标准JSON格式，且编码为UTF-8

2. 排查常见请求头配置错误 #

• 不要强制要求自定义请求头：AMP邮件的amp-list请求只会发送标准HTTP头，如果你的API校验非标准头（比如自定义的Authorization或其他业务头），会直接导致请求失败
• 处理OPTIONS预检请求：浏览器（及邮件客户端）会先发送OPTIONS请求校验CORS规则，你的服务器必须正确响应OPTIONS请求，返回上述CORS头，且HTTP状态码为200/204

3. 快速调试方法 #

可以用curl命令验证API的CORS配置是否正确：

# 发送OPTIONS预检请求，检查响应头
curl -X OPTIONS https://nail-ai.com/api/misc/test-amp -I

# 发送GET请求，检查响应内容和头
curl https://nail-ai.com/api/misc/test-amp -i

重点确认：

• OPTIONS请求返回的Access-Control-*头是否符合要求
• GET请求返回的是有效的JSON数组（比如[{"type":"test1"},{"type":"test2"}]格式），且字段名type和模板中的{{type}}完全匹配（大小写敏感）

4. 代码细节检查 #

• 确认amp-list的height设置足够容纳渲染后的内容，避免因高度不足导致内容被隐藏
• 检查fallback和placeholder是否正常显示，帮助判断请求是卡在加载阶段还是直接失败

内容的提问来源于stack exchange，提问作者EricChester