倾斜保护的工作原理 - AWS Amplify 托管
X-Amplify-Dpl 标头示例

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

倾斜保护的工作原理

在大多数情况下，_dpl cookie 的默认行为即可满足您的倾斜保护需求。但对于以下高级应用场景，建议使用 X-Amplify-Dpl 标头和 dpl 查询参数启用倾斜保护。

  • 同时在多个浏览器选项卡中加载您的网站

  • 使用服务 Worker 节点

在确定要提供给客户端的内容时，Amplify 会按以下顺序评估传入的请求：

  1. X-Amplify-Dpl 标头：应用程序可以使用此标头将请求定向到特定的 Amplify 部署。可以使用 process.env.AWS_AMPLIFY_DEPLOYMENT_ID 的值来设置此请求标头。

  2. dpl 查询参数：对于对指纹资源（.js 和.css 文件）的请求，Next.js 应用程序会自动设置 _dpl 查询参数。

  3. _dpl cookie：这是所有受倾斜保护的应用程序的默认设置。对于特定的浏览器，会为每个与域交互的浏览器选项卡或实例发送相同的 Cookie。

    请注意，如果不同的浏览器选项卡加载了同一个网站的不同版本，则所有选项卡都会共享 _dpl cookie。对于此场景，使用 _dpl cookie 无法实现完全的倾斜保护，而应考虑使用 X-Amplify-Dpl 标头进行倾斜保护。

X-Amplify-Dpl 标头示例

以下示例演示了通过 X-Amplify-Dpl 标头来访问倾斜保护功能的 Next.js SSR 页面的代码。该页面根据其一个 api 路由来呈现其内容。要提供给 api 路由的部署是使用 X-Amplify-Dpl 标头来指定的，其值设置为 process.env.AWS_AMPLIFY_DEPLOYMENT_ID。

import { useEffect, useState } from 'react';

export default function MyPage({deploymentId}) {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch('/api/hello', {
            headers: {
                'X-Amplify-Dpl': process.env.AWS_AMPLIFY_DEPLOYMENT_ID
            },
        })
        .then(res => res.json())
        .then(data => setData(data))
        .catch(error => console.error("error", error)) 
    }, []);

    return <div>
        {data ? JSON.stringify(data) : "Loading ... " }
    </div>
}