Make API request to HTTP endpoint from AWS Amplify deployed HTTPS (SSL) Client

Question

I have deployed my Backend/API server in a AWS EC2 instance, which is being loaded without SSL and the url is like, 'http://ec2-67-ap-southeast-3.compute.amazonaws.com'

And I have deployed my React Frontend/Client using AWS AMPLIFY Console. Which is automatically adding SSL to the production branch URL and the URL is like, https://branch.d3as6d542.amplifyapp.com

Now the problem is, I am unable to make any API/HTTP request to my server from client. And getting bellow error,

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.

I am able to make this API call from my client localhost development environment. But getting error from AWS AMPLIFY SERVER because of miss match of HTTP.

How can I resolve the issue or is there any way to remove the automatically added AWS AMPLIFY's SSL?

Noncompliance

Hi ! did you resolve this problem ? i have the same issue. – Monition

Hi, is there any solution? I am also facing the same issue. – Schism

Hello. I didn't found any actual solution yet. For the time being, I just added SSL to my backend. I am still looking for better solution – Noncompliance

Having the same issue too ! – Wyman

You can follow some answer from this thread. Personally I haven't found the exact answer I was looking for and make both of the endpoint under SSL - @Aldo aldo – Noncompliance

@MuhaimenulIslam After research I realized that it is not possible for your FE client to use HTTP, so my solution was just to implement my BE with HTTPS as well – Wyman

Answer 1

You can use cors everywhere proxy. It is hosted as https and is a proxy so you just need to add it before your api end point url.

Ex. http://myapi.com/v1/users can be written as https://cors-everywhere.herokuapp.com/http://myapi.com/v1/users

This will do the trick. I'm personally using this for the same setup you mentioned.

And if don't like to use their proxy, you can create your own proxy.

Gravimetric

This was quite effective for me. – Niles

Just wanted to bring this to attention. Definitely a good idea to create your own proxy github.com/Rob--W/cors-anywhere/issues/301 – Richardson

Hey Milan.. Thank alot. This is a good hack – Corpsman

Answer 2

You can create a CloudFront distribution of your backend with https support.

Conclave

A CloudFront distribution of an EC2 instance? I don't think that's possible? – Subtilize

can any confirm is this is possible and how to do it? – Hazelwood

Answer 3

Heroku now supports HTTPS calls to your-app-name.heroku.com without any configuration changes.

https://devcenter.heroku.com/changelog-items/1815

To avoid this issue, simply replace http://... with https://... in your code hosted on Amplify.

Expeller

Answer 4

Here are AWS official instructions (with free option):

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

Kohima

Answer 5

Rather than AWS Amplify you can run your frontend in S3, if you don't want Authentication. Simply build your react app and upload the build files and properly setup the access in AWS.

You won't get the Mixed Content issue because AWS S3 endpoint also http.

Niggerhead

I know I can deploy my project on S3. And also adding SSL to my backend server is a solution. But these are just way around and avoiding the problem. I am looking for a solution keeping the project on Amplify console. Thank you – Noncompliance

This might work only for html websites and not javascript enabled websites like react-js. You need to have cloudfront attached to S3 bucket and deliver the content. – Glossa