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,
|
1 2 |
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?
Answer:
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.