导航到页面时 Next.js 中的 CloudFront 标头丢失答案

【问题标题】：CloudFront headers in Next.js missing when navigating to page导航到页面时 Next.js 中的 CloudFront 标头丢失
【发布时间】：2022-08-20 03:58:29
【问题描述】：

我正在使用 serverless-nextjs 在 AWS 上托管一个相当大的 Next.js 应用程序。我们已经设置了 serverless.yml 文件，这样 CloudFront 将传递各种可用的位置标头，例如：

...
cloudfront:
  defaults:
    forward:
      headers:
        [
          CloudFront-Viewer-Country,
          CloudFront-Viewer-Country-Name,
          CloudFront-Viewer-Country-Region,
          CloudFront-Viewer-Country-Region-Name,
          CloudFront-Viewer-Latitude,
          CloudFront-Viewer-Longitude
        ]
...

在主地图组件pages/map.tsx 中，我们可以检索getServerSideProps 中的位置标头：

export const getServerSideProps: GetServerSideProps = async (context: GetServerSidePropsContext) => {
  const userLatHeader = context.req.headers[\'cloudfront-viewer-latitude\'];
  const userLngHeader = context.req.headers[\'cloudfront-viewer-longitude\'];
  const userLocation: LatLngLiteral = {
    lat: userLatHeader ? parseFloat(String(userLatHeader)) : DEFAULT_MAP_CENTRE.lat,
    lng: userLngHeader ? parseFloat(String(userLngHeader)) : DEFAULT_MAP_CENTRE.lng,
  };

  return {
    props: {
      userLocation,
    }
  }
}

当地图加载时，我们使用位置标题以用户位置为中心。我们发现，如果我们直接访问地图页面，即address.com/map，则会找到正确的 CloudFront 标头值，我们可以使用它们将地图居中并缩放到当前位置。但是，如果我们使用 next/link 组件从不同的页面导航到地图页面，例如：

index.tsx

<Link href={{ pathname: \'/map\', query }}>
  <a>Go to map</a>
</Link>

地图将使用 userLocation 的默认值加载，因为 CloudFront 标头在 getServerSideProps 中以 undefined 的形式出现。这可能是什么原因造成的？如果我在index.tsx 中检索getServerSideProps 中的相同标题并将它们注销，它们是预期的位置值，但是当从那里导航到pages/map.tsx 时，它们会以undefined 出现。

如果您在浏览器中直接访问/map，那么标题是否设置正确？
是的，它们是 - 它与使用 next/link 或 next/router 从一页导航到另一页有关

标签： next.js amazon-cloudfront

【解决方案1】：

您需要更新云端的行为。编辑 _next/data/* 的行为并为标头添加“CloudFront-Viewer-Country”-> 在缓存键和源请求下包含以下标头。

【讨论】：