How can I consume and HTTP API in my HTTPS website

Question

I built the frontend of my website using React, and it is hosted on netlify. Here is an example of a call I make to my API.

fetch(`http://blabla.com/all/`, {
            method: "GET",
            headers: {
                'Content-Type': 'application/json',
            }
        }).then((res) => {
            return res.json();
        }
        ).then((data) => {
            let informations = data.restaurant;
            // do stuff with data
        }).catch((err) => {
            console.log(err);
        })

This site is hosted on an https domain, provided by netfily. Then, my backend is a Django app, built with Docker compose and hosted on digital ocean droplets, that serves via HTTP. But each time I can the API with the site, it returns that

 Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure
 resource 'http:...'. This request has been blocked; the content must be served
 over HTTPS.

How can I fix this? Is there anything that can be done on the frontend to allow it?

Otherwise, how do I put the HTTPS stuff on digital ocean droplets and django? Because I spent almost three hours trying to figure it out, without being able to do so.

Please help me

score 1 · Accepted Answer · answered Feb 27 '23 at 09:07

Most modern browsers block Mixed Content, you can disable this on your browser temporarily if you want to debug or test your website.

However, it is recommended to have HTTPS everyhwere, using solutions like Certbot from let's encrypt might be a good start.

Please have a look at:

You can also use tools like these to check if you still have this issue:

How can I consume and HTTP API in my HTTPS website

1 Answers1