从 AWS Amplify 部署的 HTTPS (SSL) 客户端向 HTTP 端点发出 API 请求答案

【问题标题】：Make API request to HTTP endpoint from AWS Amplify deployed HTTPS (SSL) Client从 AWS Amplify 部署的 HTTPS (SSL) 客户端向 HTTP 端点发出 API 请求
【发布时间】：2020-07-11 06:24:32
【问题描述】：

我已在 AWS EC2 实例中部署了我的后端/API 服务器，该实例在没有 SSL 的情况下加载，并且 URL 类似于“http://ec2-67-ap-southeast-3.compute.amazonaws.com”

我已经使用 AWS AMPLIFY 控制台部署了我的 React 前端/客户端。它会自动将 SSL 添加到生产分支 URL，并且 URL 类似于 https://branch.d3as6d542.amplifyapp.com

现在的问题是，我无法从客户端向我的服务器发出任何 API/HTTP 请求。并得到以下错误，

Mixed Content: The page at 'https://branch.d3as6d542.amplifyapp.com' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://ec2-67.ap-southeast-3.compute.amazonaws.com/api/profile’. This request has been blocked; the content must be served over HTTPS.

我能够从我的客户端 localhost 开发环境中进行此 API 调用。但由于 HTTP 未匹配而从 AWS AMPLIFY SERVER 收到错误。

我该如何解决这个问题，或者有什么方法可以删除自动添加的 AWS AMPLIFY 的 SSL？

【问题讨论】：

嗨！你解决了这个问题吗？我有同样的问题。
嗨，有什么解决办法吗？我也面临同样的问题。
你好。我还没有找到任何实际的解决方案。目前，我只是将 SSL 添加到我的后端。我仍在寻找更好的解决方案
也有同样的问题！
你可以从这个线程中得到一些答案。就我个人而言，我还没有找到我正在寻找的确切答案，并在 SSL 下创建了两个端点 - @Aldo aldo

标签： amazon-web-services ssl xmlhttprequest aws-amplify mixed-content

【解决方案1】：

您可以使用cors everywhere 代理。它作为 https 托管并且是一个代理，因此您只需在您的 api 端点 url 之前添加它。

例如。 http://myapi.com/v1/users可以写成https://cors-everywhere.herokuapp.com/http://myapi.com/v1/users

这样就可以了。我个人将其用于您提到的相同设置。

如果不喜欢使用他们的代理，您可以创建自己的代理。

【讨论】：

这对我来说非常有效。
只是想引起注意。创建自己的代理绝对是个好主意github.com/Rob--W/cors-anywhere/issues/301

【解决方案2】：

您可以使用 https 支持创建后端的 CloudFront 分配。

【讨论】：

EC2 实例的 CloudFront 分布？我认为这不可能？
能否确认这是可能的以及如何做到这一点？

【解决方案3】：

如果您不想进行身份验证，您可以在 S3 中运行前端而不是 AWS Amplify。只需构建您的 React 应用程序并上传构建文件并在 AWS 中正确设置访问权限。

您不会遇到混合内容问题，因为 AWS S3 端点也是 http。

【讨论】：

我知道我可以在 S3 上部署我的项目。将 SSL 添加到我的后端服务器也是一种解决方案。但这些只是解决问题并避免问题。我正在寻找将项目保留在 Amplify 控制台上的解决方案。谢谢
这可能仅适用于 html 网站，而不适用于启用 javascript 的网站，例如 react-js。您需要将 Cloudfront 附加到 S3 存储桶并交付内容。