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

Since your website is over HTTPS https://blissful-lamport-78c1f5.netlify.app/

and API is non-HTTPS http://31.64.97.124/apiusers

Chrome is showing mixed content error, Means your page dosen't make all HTTPS request.

Usually the solution is to transfer all resources to HTTPS and migrate all API's to HTTPS.

However, you can Allow insecure content by site-settings > Insecure content > Allow

But, this will load your site on your chrome only and other users visiting your site still get the same Mixed Content Error.

Answer 2

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

Answer 3

probably too late for this but creating and configuring a _redirects file in the root of your build folder(or in your public folder if using an SPA like React) might help with this. This should allow Chrome load content for other users' browsers too. For your example, the _redirects file would look something like this:

/api/* http://34.68.97.184/:splat 200

Then rather than call endpoints like this:

fetch(`http://34.68.97.184/apiusers/login`)

You would need to make your API calls in this format:

fetch(`/api/apiusers/login`) // 'it reads /api/ because of how we configured our _redirects file'

You can read more on how to make netlify proxying here