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

# 倾斜保护的工作原理
<a name="skew-protection-headers"></a>

在大多数情况下，\$1dpl cookie 的默认行为即可满足您的倾斜保护需求。但对于以下高级应用场景，建议使用 `X-Amplify-Dpl` 标头和 `dpl` 查询参数启用倾斜保护。
+ 同时在多个浏览器选项卡中加载您的网站
+ 使用服务 Worker 节点

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

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

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

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

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

## X-Amplify-Dpl 标题示例
<a name="skew-protection-header-example"></a>

以下示例演示了通过 `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>
}
```