NodeJS: Send HTTPS request but get HTTP

I am building a website using NodeJS, and I deploy it to Heroku. But when I open the website, something went wrong. Here is the problem:

Code: In the main source file of my web:

app.get('/', (req, res) => {
    var data = {
        rootURL: `${req.protocol}://${req.get('Host')}`,
    };

    res.render('home.html', data);
});

Then, in home.html, I include the following script:

<script type="text/javascript">
    $.getJSON(''+'/about', {}, function(data){
        // Code here is deleted for now.
    }).fail(function(evt) {
        // Code here is deleted for now.
    });
</script>

Here I use hbs template, so is equal to the 'rootURL' property within the 'data' object rendered along with the 'home.html' page. The '/about' is one of the APIs I designed for my web. It basically sends back something about the website itself and this information is wrapped in JSON.

Then, here comes the problem. The code works fine locally, and works well when I send HTTP request instead of HTTPS to Heroku. But if I send HTTPS request to Heroku, I'll get 'Mixed Content' Errors: Errors I get in Chrome Console.

I then switched to 'Elements' tab in the developers tool, and I saw this: The schema is HTTP, not HTTPS!

I'm very confused here. I just grab the 'protocol' property within the 'req' object, and fill in the template with it. So, I'm assuming if I enter '[my-website-name].herokuapp.com' with 'https' schema in my Chrome Browser, my nodeJS app deployed on Heroku should get 'https' for req.protocol. But Apparently it's not the case. What is wrong here?

via codeavor