设置自定义标头 - AWS Amplify 托管

本文属于机器翻译版本。若本译文内容与英语原文存在差异,则一律以英文原文为准。

设置自定义标头

有两种方法可以为 Amplify 应用程序指定自定义 HTTP 标头。您可以在 Amplify 控制台中指定标头,也可以通过下载和编辑应用程序的 customHttp.yml 文件并将其保存在项目的根目录中来指定标头。

要在控制台中为应用程序设置并保存自定义标头
  1. 登录 AWS Management Console 并打开 Amplify 控制台

  2. 选择要为其设置自定义标头的应用程序。

  3. 在导航窗格中依次选择托管自定义标头

  4. 自定义标头页面中选择编辑

  5. 编辑自定义标头窗口中,使用自定义标头 YAML 格式输入自定义标头的信息。

    1. 对于 pattern,输入要匹配的模式。

    2. 对于 key,输入自定义标头的名称。

    3. 对于 value,输入自定义标头的值。

  6. 选择保存

  7. 重新部署应用程序以应用新的自定义标头。

    • 对于 CI/CD 应用程序,请导航到要部署的分支并选择重新部署此版本。您也可以从 Git 存储库中执行新构建。

    • 对于手动部署应用程序,请在 Amplify 控制台中再次部署该应用程序。

要在存储库根目录中为应用程序设置并保存自定义标头
  1. 登录 AWS Management Console 并打开 Amplify 控制台

  2. 选择要为其设置自定义标头的应用程序。

  3. 在导航窗格中依次选择托管自定义标头

  4. 自定义标头页面中选择下载 YML

  5. 在您选择的代码编辑器中打开下载的 customHttp.yml 文件,然后使用自定义标头 YAML 格式输入自定义标头的信息。

    1. 对于 pattern,输入要匹配的模式。

    2. 对于 key,输入自定义标头的名称。

    3. 对于 value,输入自定义标头的值。

  6. 将编辑后的 customHttp.yml 文件保存在项目的根目录中。如果您使用的是 monorepo,请将 customHttp.yml 文件保存在存储库的根目录中。

  7. 重新部署应用程序以应用新的自定义标头。

    • 对于 CI/CD 应用程序,请从包含新 customHttp.yml 文件的 Git 存储库中执行新构建。

    • 对于手动部署应用程序,请在 Amplify 控制台中再次部署应用程序,并将新 customHttp.yml 文件与您上传的构件一起包括在内。

注意

customHttp.yml 文件中设置并部署在应用程序根目录中的自定义标头,将覆盖在 Amplify 控制台的自定义标头部分中定义的自定义标头。

安全自定义标头示例

自定义安全标头可以强制执行 HTTPS,防止 XSS 攻击,并保护您的浏览器免受点击劫持。使用以下 YAML 语法将自定义安全标头应用于您的应用程序。

customHeaders: - pattern: '**' headers: - key: 'Strict-Transport-Security' value: 'max-age=31536000; includeSubDomains' - key: 'X-Frame-Options' value: 'SAMEORIGIN' - key: 'X-XSS-Protection' value: '1; mode=block' - key: 'X-Content-Type-Options' value: 'nosniff' - key: 'Content-Security-Policy' value: "default-src 'self'"

设置 Cache-Control 自定义标头

使用 Amplify 托管的应用程序会保留源站发送的 Cache-Control 标头,除非您使用自己的自定义标头将其覆盖。Amplify 只会为带有 200 OK 状态码的成功响应应用 Cache-Control 自定义标头。这样可以防止系统缓存错误的响应,并将其提供给发出相同请求的其他用户。

您可以手动调整 s-maxage 指令,以便更好地控制应用程序的性能和部署可用性。例如,要延长内容在边缘缓存的时间长度,您可以通过更新 s-maxage 到比默认 600 秒(10 分钟)更长的值来手动延长生存时间 (TTL)。

要指定 s-maxage 的自定义值,请使用以下 YAML 格式。此示例将关联内容保留在边缘缓存 3600 秒 (1 小时)。

customHeaders: - pattern: '/img/*' headers: - key: 'Cache-Control' value: 's-maxage=3600'

有关使用标头控制应用程序性能的更多信息,请参阅 使用 Cache-Control 标头提高应用程序性能