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?

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 — Muhaimenul Islam, Dec 25 '20 at 13:37
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 — Muhaimenul Islam, Nov 26 '21 at 12:47
@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 — Aldo aldo, Dec 05 '21 at 08:11

Milan Patel · Answer 1 · 2021-06-11T16:51:49.160

8

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.

edited Jun 11 '21 at 16:51

answered Dec 18 '20 at 11:12

Milan Patel

395
2
9

This was quite effective for me. – Sumedh Jun 08 '21 at 14:46
Just wanted to bring this to attention. Definitely a good idea to create your own proxy https://github.com/Rob--W/cors-anywhere/issues/301 – errorParser Oct 06 '21 at 07:28
Hey Milan.. Thank alot. This is a good hack – Selvam Raju Oct 27 '22 at 17:38

score 1 · Answer 2 · answered Oct 01 '20 at 13:33

1

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

answered Oct 01 '20 at 13:33

Guilherme Tomazi Klein

11
1

A CloudFront distribution of an EC2 instance? I don't think that's possible? – Kevin Hooke Oct 01 '20 at 18:35
can any confirm is this is possible and how to do it? – BioAbner J Oct 16 '21 at 06:59

Michel · Answer 3 · 2023-06-28T16:25:11.110

1

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.

edited Jun 28 '23 at 16:25

answered Jun 28 '23 at 16:23

Michel

11
4

score 0 · Answer 4 · answered Jul 24 '22 at 23:03

0

Here are AWS official instructions (with free option):

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

answered Jul 24 '22 at 23:03

Riza Khan

2,712
4
18
42

score -2 · Answer 5 · answered Apr 01 '20 at 12:15

-2

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.

answered Apr 01 '20 at 12:15

p.kovelan

9
2

2

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 – Muhaimenul Islam Apr 02 '20 at 05:20
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. – saumilsdk Sep 16 '20 at 04:32

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

5 Answers5