Question: Having this client-side configuration (react based)

```
export const config = {
  API_URL: process.env.NODE_ENV === 'production' ? 'https://myserverapp.herokuapp.com/' : 'http://mywebapp/'
}

```

When deploying it to the server (some shared hosting server) and sending the requests to my backend server (lumen based on heroku server) I get this error -

> 
> Mixed Content: The page at '<https://mywebapp.com/>' was
>  loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint
>  '<http://myserverapp.herokuapp.com/items>'. This request has been blocked;
>  the content must be served over HTTPS.
> 
> 
> 

* at the beginning the app was build by Angular and all works great! Now when switching to react this error happens.

What is happening? How can I fix it?

Answer: 
Dropping this Comment for future users who fall into this issue

Error is caused by trying to load an insecure script "HTTP" from a secured URL "HTTPS"

Fix 1
=====

One way to fix the issue will be to visit the insecure version of the site (i.e) <http://whatever.herokuapp.com> but this isn't a good fix cause your viewers won't know what the issue is which brings us to Fix 2

Fix 2
=====

Get the URL to determine what protocol the very instance is making use of
In PHP, i did this using this lines of code

```
if(isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on'){ $protocol = "https://".$_SERVER['HTTP_HOST']; } else{ $protocol='http://'.$_SERVER['HTTP_HOST']; }

```

and then appending the protocol to what ever you are importing from your website

If the import is from an external website, just replace http in your `script` tag or `style` tag with `https`.

Hope this helps.
You can just go for:

```
'//myserverapp.herokuapp.com/'

```

If you do want to write the protocol and still avoid mixed content, use:

```
location.protocol + '//myserverapp.herokuapp.com/'

```