Mixed Content: was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint

Describe the bug I have a react app that works perfectly in development/and production build when being served up via “serve build.” I went through the AWS amplify process pretty quickly, and the app built is no issues and was deployed, However the page was blank and the console gave the error:

ag_signaltab.js:5 Mixed Content: The page at ‘https://master.d1n9105puc6llp.amplifyapp.com/’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http: (removed my IP Address)’. This request has been blocked; the content must be served over HTTPS.

This api call is actually being requested from my own API currently running on an AWS EC2 instance. I am unfortunately clueless on why I get this error when deployed by Amplify, but works fine locally. I am hoping I am missing something very simple/fundamental that I can fix. I want to use Amplify very much, and not deploy on myself on another EC2 instance.

To Reproduce Steps to reproduce the behavior:

1. using AWS amplify clone repo https://github.com/RylandCapital/dyvol_dashboard.git
2. Build app in amplify with auto detected build settings
3. click website address
4. see error in console.

Expected behavior For my react app to load as it does locally.

Code Snippet Here is the code that is getting the error

function Get(yourUrl){
  var Httpreq = new XMLHttpRequest(); // a new request
  Httpreq.open("GET",yourUrl,false);
  Httpreq.send(null);
  return Httpreq.responseText;          
}

var positions = JSON.parse(Get('http://apiAddress/dvolsig'));

positions.forEach((item) => {
  item.index = new Date(item.index)
  item.index.setMinutes(0)
  item.index.setHours(0)
  item.index.setSeconds(0)
  item.VIX_VXV = Number(item.VIX_VXV.toFixed(3))
  item.FiveDay_Avg_CB = Number(item.FiveDay_Avg_CB.toFixed(3))
  item.CB_Points = Number(Number(item['CB Points']).toFixed(3))
});

export default positions

Environment

npx envinfo --system --binaries --browsers --npmPackages --npmGlobalPackages

- Browser : chrome - Version : Version 1.13.82 Chromium: 85.0.4183.83 (Official Build) (64-bit)

Additional context Not sure if these pertain to issue.

[RylandCapital]

my issue is that my react app was calling data from an HTTP API. because my react app domain was HTTPS I was receiving the mixed content error. So I went and made my API except HTTPS requests. by switching the HTTP requests with HTTPS requests I now longer got that error. In order to set my server up to receive HTTPS requests, I created a ssl certificate on Amazon Certifcate Manager, and created a load balancer using that certificate and pointed the load balancer at my server on port 5000 which is the port my express server was running on.

[WualterH]

@aarunjith intente exactamente los mismo y no me funciono. Alguna otra solucion?