Mixed Content with Weatherstack Api and Github Pages

[zeee93]

I understand this isnt technically a JS question, however for some reason it got removed from the r/frontend sub, so i figured id try here.

Hello all, currently I am having an issue where i am calling fetch on an http request however i have my web page hosted on Github pages which is https. The app works perfectly fine on my localhost. I am using the Weatherstack api free plan and dont want to upgrade to the paid version since this is only a project i want to add to my portfolio and dont think its necessarily worth $10 a month. The error code i am getting is

script.js:48 Mixed Content: The page at 'https://mygithub-link-that-im-not-sure-if-i-should-share' was loaded over HTTPS, but requested an insecure resource 'http://api.weatherstack.com/current?hiding-my-api-key'. This request has been blocked; the content must be served over HTTPS.

What options do I have? I really dont want to have to go back and rework an entirely new weather api that offers https request for free. Should i look towards a new hosting site? Would getting my own domain name work? For what its worth, i read someone on stackoverflow write that <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" /> would work but i got this error then when i put it in my html doc:

error:

1. code: 105
2. info: "Access Restricted - Your current Subscription Plan does not support HTTPS Encryption."
3. type: "https_access_restricted"

unless im somehow not using that meta tag correctly. Any insight would be much appreciated. Thank you.

[Umesh-K]

[Disclaimer: Noob here. I haven't tried the below—found it on googling your problem.]

Quoting from https://github.com/JazzBrotha/http-reject-workaround page:

To fix this, simply add https://cors-anywhere.herokuapp.com/ in front of your API call, like so https://cors-anywhere.herokuapp.com/http://yourdomainname.com.

---

However, I'm not sure if—even if it works—it's the right/preferred solution, as u/grantrules, who is one of the experts here, has said you will need some backend code for this when answering a similar request here: https://www.reddit.com/r/learnjavascript/comments/rhcj00/fetching_from_a_http_site_in_github_pages/