Mixed Error: This request has been blocked; the content must be served over HTTPS

Question

I have deployed my reactapp to netlify, the backend api endpoint looks like http://31.64.97.124/apiusers the requests are working fine on localhost but when i delployed my frontend to server, on every fetch request it start giving below error.

Mixed Content: The page at 'https://blissful-lamport-78c1f5.netlify.app/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://34.68.97.184/apiusers/login'. This request has been blocked; the content must be served over HTTPS.

any solution for this problem?

Answer 1

From chrome settings allow insecure content for this site. Root cause for the issue is http and HTTPS mixed content site is served as http and netlify with https.

From site settings look for below option