How to fix “Mixed Content:” error when making API

Question

I am using the bitnami version of elasticsearch from firebase. I found out that it only connects to http and not https when i tried it using postman. My create-react-app is deployed to firebase and I am getting Mixed Content: error when I try to fetch data using the axios library.

Here id my code:

import axios from 'axios';

axios.get('http://xx.xxx.xx.xxx//elasticsearch/tasks/task/_search?default_operator=AND&q=*', {
    httpsAgent: agent,
    method: 'get',
    headers: {
        // 'Content-Type': 'application/json',
        'Authorization': 'Basic xxxxxxxxxx='
    }
});

and the error

Mixed Content: The page at 'https://xxx-xxxx.firebaseapp.com/tasks' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://xx.xxx.xx.xxx//elasticsearch/tasks/task/_search?default_operator=AND&q=*'. This content should also be served over HTTPS.