AMP中如何设置Authorization请求头？

好问题！AMP确实支持在GET/POST请求中携带Authorization请求头，但需要遵循特定的配置方式，下面我结合你提到的组件逐一说明：

使用amp-list配置Authorization请求头 #

对于amp-list，你可以通过credentials="include"配合headers属性来设置请求头。如果是固定token，写法如下：

<amp-list
  src="https://your-api-endpoint.com/data"
  credentials="include"
  headers='{"Authorization": "Bearer YOUR_ACCESS_TOKEN"}'
  layout="fixed-height"
  height="200"
>
  <template type="amp-mustache">
    <!-- 这里写你的数据渲染模板 -->
  </template>
</amp-list>

如果你的token是动态存储在amp-state中的，还可以通过数据绑定动态注入：

<amp-state id="user">
  <script type="application/json">
    {"accessToken": "Bearer YOUR_DYNAMIC_TOKEN"}
  </script>
</amp-state>

<amp-list
  src="https://your-api-endpoint.com/data"
  credentials="include"
  headers='{"Authorization": "{{user.accessToken}}"}'
  layout="fixed-height"
  height="200"
>
  <template type="amp-mustache">
    <!-- 模板内容 -->
  </template>
</amp-list>

使用amp-form配置Authorization请求头 #

amp-form的配置逻辑类似，同样需要credentials="include"和headers属性，以POST请求为例：

<form
  method="POST"
  action-xhr="https://your-api-endpoint.com/submit"
  credentials="include"
  headers='{"Authorization": "Bearer YOUR_ACCESS_TOKEN"}'
>
  <!-- 表单输入字段 -->
  <input type="text" name="content" placeholder="输入内容">
  <input type="submit" value="提交">
</form>

同样支持结合amp-state实现动态token注入，写法和amp-list一致，只需把headers里的固定值换成{{user.accessToken}}即可。

容易踩坑的关键注意事项 #

• CORS配置必须正确：你的API服务器必须返回允许Authorization头的CORS响应，具体需要确保Access-Control-Allow-Headers包含Authorization，同时Access-Control-Allow-Origin设置为你的AMP页面域名（或合理的通配规则），否则请求会被浏览器拦截。
• 必须加credentials="include"：这个属性是AMP允许携带自定义请求头的必要前提，缺少它的话headers配置会不生效。
• headers的JSON格式要严格：属性值必须是标准JSON字符串，键和值都要用双引号包裹，整个属性可以用单引号来包裹JSON内容（避免转义麻烦）。

如果你之前尝试失败，大概率是以上某一个环节没做到位，可以逐一排查验证。

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