Codepen "blocked request", building Random quote machine with 'getJson'

Codepen "blocked request", building Random quote machine with 'getJson'
0

#1

I get this error message in my console when I run my code for the random quote machine:

Mixed Content: The page at 'https://codepen.io/username/pen/BzRzbY?editors=1112' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://quotes.stormconsultancy.co.uk/random.json'. This request has been blocked; the content must be served over HTTPS.

At this point, I’m just trying to get my code to connect with the API, so my javascript so far is:
$.getJSON("http://quotes.stormconsultancy.co.uk/random.json", function(json) { console.log(json); });

I’d like to get a json with a random quote and some other data to pop up in my console when I click “Run”, but obviously, no such luck.

I don’t know if it’s just a setting I need to turn off in Codepen to allow unsecured connections, or if I’m totally missing something in my code. My HTML so far is just like the examples in FCC"s JSON API’s and Ajax lessons (again, hoping to just get something working for now). I plugged in a quote API’s endpoint and tried to get it to print to the console upon success.

I’ve looked at articles explaining getJSON and making simple API requests, and the example code looks pretty much like mine, another example also looks much like mine so I can’t figure out what’s wrong. Or is there a lot I’m missing here?

Thanks!


#2

It’s not a codepen setting, it’s the browser. If your page is served over https, then everything it fetches must also be over https. Since it appears the API you’re using doesn’t support https, you’ll have to switch your codepen connection to http, or find a different API.

Also, you should be aware that you aren’t actually required to use an API for your quotes. Many people finish the project just using an array.


#3

Thanks! I’ll try to switch the setting, and if I can’t get an API to work, I’ll try using an array.


#4

True, for the quotes I used the array. For the twitter button though you must use the twitter API right?


#5

How does one change Codepen to HTTP?


#6

I just deleted the s in https and then I didn’t get the error message after that about mixed content.


#7

I did the same thing but the browser just automatically reloaded back to https :frowning:


#8

I had the same issue. I have just changed the protocol on API side. Like this
https://quotes.stormconsultancy.co.uk/random.json

the https protocol works well, and I can continue to code…


#9

Thank you for your advice! It is really helped.