HTTP request has been blocked; the content must be served over HTTPS

Question

I am facing problem to call web service which is hosted over HTTP and I am calling web service from https domain.

web service's htaccess

RewriteEngine On 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteRule ^(.*)$ %{ENV:BASE}index.php [QSA,L]

i got following error in console when i am trying to calling web.

angular.min.js:93 Mixed Content: The page at 'https://www.<my-domain.com>/#/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://<api url goes here>'. This request has been blocked; the content must be served over HTTPS.

Note

Web service is hosted in aws server which is http only. and my website is hosted to other hosting provider.

Solution

You can't fetch insecure (http) resources from a secure (https) origin.

It's called mixed-content and browsers block it for security reasons. (it may allow passive content like images, often with warnings)

What you can do:

• explain to the web service the advantages of https
• proxy the answer of the web service through your sever