Mixed Content with heroku server

1
votes

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?

2
reactjslaravelsslherokulumen
On an https webpage you can only make AJAX request to https webpage, I guess your code is running in production in "development" mode, did you check that it runs in "production" mode? – Nir Ben-Yair
@NirBen-Yair hi yes, it does run at production mode. I know this because I set some conditions for production/development mode and all act as expected – Maayans
does your "mywebapp" app runs on https? – Nir Ben-Yair
@NirBen-Yair yes it does – Maayans
well, your API request, for some reason is to http://myserverapp.herokuapp.com/items it should be to https – Nir Ben-Yair

2 Answers

1
votes

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.

0
votes

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/'