amazon-web-services - 在 AWS 中 - 具有 SSL 证书的子域在 RESTful 调用中不起作用

Question

我有一个 AWS Amplify 实例来启动我拥有的 REACT 应用程序。它还有一个 SSL 证书，所以我可以通过输入以下内容在浏览器上访问该应用程序: https://myreactapp.com (不是我真正的应用程序网址，只是一个例子)

我有一个在没有 SSL 证书的 Elastic Beanstalk 实例上运行的 Web servlet，我的 REACT 应用程序使用我拥有的代码片段与它交互:

    var myObject = {
        data1: this.state.data1,
        data2: this.state.data2
    }


    $.ajax({
        type: "POST",
        url: 'http://<my-backend-webservices-app>.us-east-1.elasticbeanstalk.com/doSomething', // works only from React app when running on local machine (http://localhost:3000), not from https url
        contentType: 'application/x-www-form-urlencoded; charset=utf-8',
        data: myObject,
        success: function(response) {
          console.log('success -- ' + response);  
        },
        function(errMsg) {
            alert('Major Error');
        }
    }); 

这段代码工作正常，当我在我的机器上本地运行我的 React 应用程序时，我从我的 my-backend-webservices-app 得到了响应。因为当我在本地使用它时， react 应用程序在 http://localhost:3000 上(注意它不是 https)并且它与也在 http 上的 Elastic Beanstalk 实例通信。

但是，当我使用 SSL 证书从 AWS Amplify 运行我的 React 应用程序时，它会提示来自 HTTPS 的 RESTFul 请求无法与 http url 通信。这是来自浏览器的错误:

jquery.js:8676 Mixed Content: The page at 'https://master.<.....>.amplify<...>.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://.us-east-1.elasticbeanstalk.com/doSomething'. This request has been blocked; the content must be served over HTTPS.

所以我想解决这个问题是向我的 ElasticBeanStalk 实例添加一个 SSL 证书。所以首先我创建了一个子域 services.myreactapp.com ，其中主域是 myreactapp.com 然后我分配了我的 ElasticBeanstalk 实例(我的后端 webservices-app 是) 到那个 services.myreactapp.com 子域。

然后我转到 aws 的Certificate Manager 服务页面并请求分配给 services.myreactapp.com 子域的公共(public)证书。

所以现在我将上面代码片段的 URL 更新为 https 而不是 http:

        url: 'https://<my-backend-webservices-app>.us-east-1.elasticbeanstalk.com/doSomething',

但现在每当我的 React 应用程序从 https 向后端 servlet 发出请求时，它就会挂起。

对我遗漏的东西有什么想法吗？

Answer 1

这里有几件事要强调。

关于ACM颁发的证书

• 首先，如果您向证书管理器申请证书，它不会自动应用于您的任何应用程序，您需要将证书应用于您的应用程序。

在 Elasticbeanstalk 中使用 ACM 颁发的证书

• 只有在使用负载均衡器时，您才能将从 ACM 获得的证书应用到 elasticbeanstalk。在这种情况下，您只需从 elasticbeanstalk 配置页面中选择您的证书即可。

  引用:为 elasticbeanstalk 负载均衡器配置 ssl - https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/configuring-https-elb.html

如果您没有使用负载均衡器(单实例)

• 您必须将证书应用于在 elasticbeanstalk 或其代理(例如 nginx)中运行的应用程序。您可以使用 .ebextensions 来实现这一点。

  引用:

  https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/https-singleinstance-nodejs.html

  https://medium.com/@hzburki.hzb/configure-ssl-certificate-elastic-beanstalk-single-instance-a2846211851b

将 subdomain.example.com 指向 elasticbeanstalk 的 DNS 名称

• 在您的负载均衡器上启用 SSL 或配置您的单个实例以通过 ssl 为您的应用程序提供服务后，您可以创建一个 A 记录以指向 services.myreactapp.com到您的 elasticbeanstalk dns 名称。确保在创建 A 记录时选择 Alias Yes。

使用前端应用中的新 DNS 名称

最后，您可以在前端应用程序中使用 subdomain.mydomain.com 而不是 elasticbeanstalk dns 名称。

希望这对您有所帮助，祝您好运。