Cloudfront 分发中 S3 中的 React App 将 HTTPS 请求转换为 HTTP

Posted 2023-03-27

【中文标题】Cloudfront 分发中 S3 中的 React App 将 HTTPS 请求转换为 HTTP

【英文标题】：React App in S3 in Cloudfront distribution turning HTTPS request to HTTP

【发布时间】：2021-07-18 21:11:12

【问题描述】：

我是 AWS 的新手，但我遇到了一个错误。

我有一个作为静态网站托管在 S3 存储桶上的 React 应用程序，并为其设置了 Cloudfront 发行版，因此它受到 SSL 的保护。我还有一个托管在 EC2 上的 NodeJS/express 后端，带有我自己制作的 SSL 证书，并且 EC2 已全部设置为接收 HTTPS 请求（我添加了一个负载均衡器来处理 HTTPS 请求）。

这里是转折点。所以基本上在 React 项目配置中，我有这样的后端 URL：https://long-url-to-ec2.....，你得到了氛围。 所以我基本上有 2 个环境，S3 存储桶中的 React 应用程序（不安全的应用程序）和 Cloudfront 中的 React 应用程序是安全的。但问题是在我的应用程序的 S3 Bucket 版本中，我的所有请求都发送到 https://my-backend 但在 Cloudfront 版本中，请求仅发送到 http://my-backend 。 Cloudfront 似乎并不关心 URL，即使在 URL 中指定了 https，也只是通过 HTTP 发送我的所有请求！

有人知道我必须在 Cloudfront 中设置什么，以便它将我的请求发送到良好的 HTTPS URL 而不仅仅是 HTTP？

【问题讨论】：

创建云端时有一个选项“将http重定向到https”

我已启用它。但这只是针对我浏览器的前端请求。这不会影响从我的 React 应用程序到我的后端的请求

你怎么会有两个版本的 React App？ cloundfront 仅作为 s3 存储桶的安全层，它不包含实际的应用程序。

我是说有两个 URL 来访问我的 React 应用程序（S3 链接和 Cloudfront 链接）

【参考方案1】：

无论您使用 S3 url 还是 CloudFront url，它都是托管在 S3 中的同一个 React 应用程序。问题是当您的反应应用程序调用后端时，这只是一个 ALB url，对吗？所以这一定是你的反应代码的问题。您在反应应用程序中定义如何调用后端。这与 CloudFront 无关。

虽然我有点困惑，使用 S3 url 和 CloudFront url 时如何获得不同的结果。最终，调用后端的反应应用程序完全相同。您应该从如何从 React 应用程序调用后端的问题开始。您正在使用的确切代码。这应该会给你一个线索。