时间戳

首页 > 解决方案 > 在 AWS 中 - 带有 SSL 证书的子域在 RESTful 调用中不起作用

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

问题描述

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

我有一个在没有 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 混合内容：“ https://master .<.....>.amplify<...>.com/”处的页面是通过 HTTPS 加载的，但请求了不安全的 XMLHttpRequest 端点“http: //.us-east-1.elasticbeanstalk.com/doSomething'。此请求已被阻止；内容必须通过 HTTPS 提供。

所以我想解决这个问题是向我的 ElasticBeanStalk 实例添加一个 SSL 证书。因此，首先我创建了一个子域services.myreactapp.com，其中主域是myreactapp.com，然后我将我的 ElasticBeanstalk 实例（我的后端 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 发出请求时，它就会挂起。

对我所缺少的有什么想法吗？

标签： amazon-web-servicessslhttpsamazon-elastic-beanstalksubdomain

解决方案

这里有几件事要强调。

关于 ACM 颁发的证书

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

使用 ACM 颁发的 Elasticbeanstalk 证书

如果您没有使用负载均衡器（单实例）

指向subdomain.example.comelasticbeanstalk 的 DNS 名称

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

使用前端应用程序中的新 dns 名称

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

希望这有帮助，祝你好运。

推荐阅读