在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 App时，我收到了my-backend-webservices-app的响应。因为当我在本地使用它时，react应用程序位于http://localhost:3000上（请注意，它不是https），并且它与也在http上的Elastic Beanstalk实例进行对话。

但是，当我从带有SSL证书的AWS Amplify运行我的React应用程序时，它抱怨说HTTPS发出的RESTFul请求无法与http url通信。这是来自浏览器的错误：

jquery.js：8676混合的内容：该页面位于'https://master。<.....>。amplify <...>。com /'通过HTTPS加载，但请求了不安全的XMLHttpRequest端点'http：//.us-east-1.elasticbeanstalk.com/doSomething'。该请求已被阻止；内容必须通过HTTPS提供。

因此，解决此问题的想法是向我的ElasticBeanStalk实例添加SSL证书。因此，首先我创建了一个子域services.myreactapp.com，其中主域是myreactapp.com，然后将我的ElasticBeanstalk实例（我的backend-webservices-app所在的位置）分配给了该[[services .myreactapp.com子域。

然后我进入了aws的

证书管理器

服务页面，并请求将公共证书分配给services.myreactapp.com子域。所以现在我将上面代码片段的URL更新为使用https而不是http：

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

但是现在只要我的来自https的React应用向后端servlet发出请求，它就会挂起。
有什么想法我想念的吗？

Answer 1

转到AWS路线53，在DNS管理中创建指向您的beanstalk URL的CNAM DNS记录，例如-

services.myreactapp.com -> xyz.us-east-1.elasticbeanstalk.com

然后在您的应用程序中使用services.myreactapp.com作为URL。同样，在执行此操作之前，请确保可以访问https://services.myreactapp.com的后端，然后可以检查运行状况API（如果有）进行测试。注意-这可能需要一些时间才能使services.myreactapp.com生效。

Answer 2

这里没有什么要强调的。

关于ACM颁发的证书

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

使用ACM颁发的Elasticbeanstalk证书

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

参考：为Elasticbeanstalk负载平衡器配置ssl-https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/configuring-https-elb.html

可以使用ACM证书的服务-https://docs.aws.amazon.com/acm/latest/userguide/acm-services.html

如果未使用负载均衡器（单个实例）

您必须将证书应用于在Elasticbeanstalk或其代理（例如nginx）中运行的应用程序。您可以使用.ebextensions实现。

参考：

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