Problem hosting Random Quote Generator on Github Pages

Hi everyone,

I wanted to host my Random Quote Generator on Github Pages but I get this issue on my API url (forismatic) which prevents the quotations being loaded:

Failed to load resource: net::ERR_INSECURE_RESPONSE

Here’s a link to my codepen (which also strangely now isn’t working properly but was previously…):

Can anyone spot what’s wrong with either the forismatic link or my JQuery library link? It all works fine when I just load the index.html file in my browser. Really want to finish tidying this project up and move on!

Much appreciated.

Might be to do with mixing the https of githubpages with forismatic which seems to be http; this caused me problems when I was doing the weather app. Have you tried prepending before your api call? (e.g.…)

This routes it through the cors-anywhere https server and solved some of my problems.

1 Like

Thanks Bart, didn’t know about cors-anywhere and yes it seems the http / https is the problematic part. Unfortunately it didn’t make any difference though :pensive:

Hmm, I don’t know then. Can you post the link to the broken github pages version?
BTW, good job with the app, it looks nice!

Thanks Bart! Here’s the link to the Github Pages version:

@ameliejyc Hey, I cloned your github repository and got it working, as you can see here (don’t worry I’ll remove it from my account later!).

The key was changing your request from jsonp to json. I haven’t used jsonp and so can’t comment on it in detail, but I understand that it is another way of working around cross origin issues. When using cors-anywhere you don’t need to use jsonp, as cors-anywhere takes care of the cross origin issue. My understanding is that cors-anywhere adds the headers that the browser needs to see in order to accept the api response. Why it doesn’t work with the original jsonp query I don’t know…

I’ve noticed that sometimes pressing on the get new quote button doesn’t work. click again and it starts working - not sure what causes this bugginess though.

Also it seems that sometimes when I first open it there is no quotation displayed, I have to click ‘get another’ to get one to display - perhaps it’s just my poor internet connection.

@Surogo Wow, I’d have never known that! Looks like I have some reading to do.

I’m seeing the initial quotations load but am seeing slight bugginess in the new quote function too - not sure what’s going on there but will investigate.

Cheers for finding a solution to my main problem :slight_smile:

Hey @BartBucknill, this actually solved my problem with http/https, thanks so much for sharing this!

I got it to work on my website (, which is still under construction, but this page is finalized. But I was not able to get it to work on my CodePen ( Thought it was a bit weird, do you have any idea why this might be happening?

Thanks in advance!

Hey @carolineportugal, wow your random quote machine is beautiful!

I’m sorry but I don’t know the answer to your question. I’ve mostly managed to get things working with my AJAX problems but there are many things I still don’t know. The only obvious difference I can see between your pen and github pages is that your pen is http whilst gtihub pages is https. Not sure if/why this would make a difference though.

I’m actually yet to find a really good resource teaching all the practical ins and outs of AJAX, definitely still in need of one.

@BartBucknill Thanks for looking into it though! I guess you’re right: it might have to do with Codepen’s http/https setup.