AMP页面中能否为amp-list配置远程域名的JSON数据源？

Absolutely! You can use a remote domain's JSON data source with amp-list—this is exactly the kind of scenario the component was built for, especially when you need dynamic, frequently updated content without rebuilding your slow Jekyll site.

Key Requirements to Make This Work #

To comply with AMP's security rules, your remote data source needs to meet a few CORS-related criteria:

• Required CORS Headers: The remote server must return either:
  • Access-Control-Allow-Origin: * (less secure, but works for public, un-sensitive data)
  • AMP-Access-Control-Allow-Source-Origin: https://your-amp-site-domain.com (more secure, restricts access exclusively to your AMP site)
• Valid MIME Type: The response must have a Content-Type header set to application/json—AMP will reject responses that don’t meet this standard.
• HTTPS Only: All external requests from AMP must use HTTPS, so your remote data endpoint must be served over a secure connection.

Example Implementation #

Here’s a clean amp-list setup pointing to your remote JSON source (which should return an array of url/title objects):

<amp-list 
  width="auto" 
  height="300" 
  layout="fixed-height" 
  src="https://your-remote-domain.com/updated-links.json"
>
  <!-- Mustache template to render each list item -->
  <template type="amp-mustache">
    <div class="list-item">
      <a href="{{url}}" rel="noopener noreferrer" target="_blank">{{title}}</a>
    </div>
  </template>
  <!-- Fallback content while loading -->
  <div fallback class="loading">Loading latest links...</div>
  <!-- Error content if the request fails -->
  <div error class="error">Oops, couldn't load content right now.</div>
</amp-list>

Extra Tips for Smooth Operation #

• Cache Control: Set appropriate Cache-Control headers on your remote JSON response (e.g., Cache-Control: max-age=300 for 5-minute caching) to balance performance and content freshness. AMP’s CDN will respect these headers.
• JSON Structure: Ensure your remote JSON is a valid array (e.g., [{"url": "https://example.com", "title": "Example Title"}, ...])—amp-list works best with array data for list rendering.
• Testing: Use AMP’s validator tool to check for CORS or configuration errors, and verify your endpoint’s headers with tools like curl to confirm everything is set up correctly.

内容的提问来源于stack exchange，提问作者Chris A.