使用 CloudFront 托管 React 应用程序的 S3 静态网站的请求标头

Question

我有一个部署到 S3 的 React 应用程序，上面有一个针对特定域 CNAME 的 CloudFront 分配。我希望能够为单独的不同域创建第二个 CloudFront 分配，但使用相同的 S3 存储桶作为源。

但是，在 React 应用程序中，我需要能够知道请求来自哪里，以便应用程序可以基于此动态加载不同的数据。我发现我可以将自定义 HTTP 标头从 CloudFront 传递到源，但这似乎无法从在浏览器中运行的 React 代码访问。

有没有办法用 S3 和 CloudFront 做到这一点？

Answer 1

我建议使用React Router 来处理基于路由呈现不同的组件/数据 - 文档非常出色。我在使用 React Router 的 CF 发行版后面的 S3 中托管了一个 React 应用程序，它运行良好。