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?
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.
You can create a CloudFront distribution of your backend with https support.
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.