如何确保AWS Lambda在Qwik SSR应用中使用CloudFront域名作为规范URL？

一、先在AWS侧配置，把CloudFront域名传给Lambda #

• 给CloudFront加自定义请求头
  打开CloudFront分发的行为设置，新增一个自定义请求头（比如X-Forwarded-Host），值填你的CloudFront域名。这样请求经过CloudFront转发到API Gateway时，这个头会一并传给Lambda。
• 让API Gateway放行这个自定义头
  在API Gateway的HTTP API配置里，确保X-Forwarded-Host不会被过滤，允许它通过到后端的Lambda。

二、Lambda里提取域名，传给SSR框架 #

在Lambda的处理函数中，从请求头里取出X-Forwarded-Host的值，再把这个域名传递给Qwik或React的SSR渲染逻辑：

exports.handler = async (event) => {
  // 拿到CloudFront域名，兼容大小写的请求头
  const cloudFrontHost = event.headers['x-forwarded-host'] || event.headers['X-Forwarded-Host'];
  // 把域名传给SSR渲染的上下文
  const renderResult = await renderSSRApp({
    host: cloudFrontHost,
    // 其他必填参数
  });
  // 返回渲染好的页面
  return {
    statusCode: 200,
    body: renderResult.html,
    headers: { 'Content-Type': 'text/html' }
  };
};

三、Qwik SSR的适配 #

在Qwik的SSR入口文件（比如entry.ssr.tsx）里，用拿到的CloudFront域名生成规范URL：

export default function handleRequest(event: Request) {
  // 从请求头里取CloudFront域名
  const cloudFrontHost = event.headers.get('X-Forwarded-Host');
  // 替换原URL的主机为CloudFront域名
  const canonicalUrl = new URL(event.url);
  canonicalUrl.host = cloudFrontHost || canonicalUrl.host;
  
  // 把处理后的URL传给Qwik渲染
  return renderToStream(<Root />, {
    manifest,
    url: canonicalUrl.toString(),
    // 其他配置项
  });
}

四、React SSR的适配（以Next.js为例） #

如果是用Next.js做SSR，在getServerSideProps里获取CloudFront域名，再传给页面组件设置规范URL：

export async function getServerSideProps(context) {
  const cloudFrontHost = context.req.headers['x-forwarded-host'];
  // 生成完整的规范URL
  const canonicalUrl = new URL(context.req.url, `https://${cloudFrontHost || context.req.headers.host}`);
  
  return {
    props: {
      canonicalUrl: canonicalUrl.toString(),
    },
  };
}

// 页面组件里渲染规范链接
export default function Page({ canonicalUrl }) {
  return (
    <>
      <link rel="canonical" href={canonicalUrl} />
      {/* 页面内容 */}
    </>
  );
}

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