如何在本地环境使用amp-list开发AMP页面并解决相关报错？

我来帮你捋清楚这个问题，你遇到的两个报错本质都是本地服务的配置没到位，咱们一步步来解决：

一、先搞定404错误的问题 #

你用http://localhost:9909/data1.json/时出现404，大概率是两个小问题：

• 你的本地服务器没在项目根目录启动，导致找不到data1.json文件
• URL末尾多了个斜杠/，改成http://localhost:9909/data1.json试试

先确认你的本地服务器（不管是用Python、Node.js还是其他工具）是在存放AMP页面和data1.json的文件夹里启动的，这样文件才能被正确访问到。

二、解决amp-list的源限制问题 #

AMP对amp-list的数据源有严格的安全校验，虽然提示说支持localhost，但得确保你的本地服务是合规的，同时处理好CORS。这里给你两个实用的本地服务方案：

方案1：用Node.js的http-server快速搭建带CORS的HTTP服务 #

这个方案适合快速测试，步骤超简单：

1. 先装Node.js，然后全局安装http-server：

   npm install -g http-server
   

2. 进入你的项目根目录，启动服务器并开启CORS：

   http-server -p 9909 --cors
   

3. 现在访问http://localhost:9909/你的AMP页面文件名.html，把amp-list的src改成http://localhost:9909/data1.json（或者直接用相对路径./data1.json，因为现在是localhost服务，符合AMP的要求）

方案2：搭建本地HTTPS服务（模拟生产环境） #

如果想测试HTTPS场景，用http-server也能搞定，需要生成自签名证书：

1. 用OpenSSL生成证书（没有的话先装OpenSSL）：

   openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem
   

2. 启动HTTPS服务器：

   http-server -p 9909 --ssl --cert cert.pem --key key.pem --cors
   

3. 访问时用https://localhost:9909/你的AMP页面文件名.html，src用https://localhost:9909/data1.json或者相对路径都可以

三、额外要注意的细节 #

• 别忘了在AMP页面的<head>里引入amp-list和amp-mustache的脚本：

  <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
  

• 测试时打开浏览器开发者工具（F12），看Network面板里的请求状态，确认JSON文件是否加载成功，CORS头部是否正常返回

这样配置完，你的amp-list应该就能正常加载数据啦。

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