The page at ‘<URL>’ was loaded over HTTPS, but requested an insecure resource ‘<URL>’. This request has been blocked; the content must be served over HTTPS.

For the last week, I have been creating a single-page React application to apply for an internship. The work was going smoothly, which make me worried, because what I know so far about software engineering that, only on tutorials coding is smooth! It’s like watching a movie and wondering ‘why is she sleeping with makeup’, ‘oh, they always have perfect hair’, ‘they never get red on the beach!’. You know what I am talking about.

Coding along and wondering when some bug will come out! That’s a matter of when -not if. So you can imagine my surprise when I finished and everything was working perfectly. Some of the futures were:

  • Search from OMDb (database).
  • Nominate up to 5 movies.
  • Un-nominate these movies from the nomination list.
  • The nominations are saved in localStorage.
  • Notifies users when their five nominations are up.

When I wanted to deploy my app the next day, the circus started. Generally, the deployment was successful but I wasn’t able to see my application. Just a #0b132b background. There are 2 things a have learned yesterday :

1.(In my case) Empty localStorage return as ‘null’. I got the error, that I can’t map over null. If you want to bring elements from localStorage while uploading the web app, make sure you consider an option that localStorage is empty (like with new users). Simply ‘if’ statement will do!

2. Mixed Content. “The page at ‘<URL>’ was loaded over HTTPS, but requested an insecure resource ‘<URL>’. This request has been blocked; the content must be served over HTTPS.” Well, that’s pretty clear. What makes me confused is, how can I get secured ‘https’, when the website I am using to get database is with unsecured ‘http’. As a real junior developer, i decided to simply add needed ‘s’ to address, and see what will happen. It works!

Now you don’t have to stress over mixed content, I got your back! Let me know if it was usefull!

SOFTWARE ENGINEER — WEB DEVELOPER WITH HEART FOR FRONT-END, MINIMALISM AND RASMENTALISM.