# Help Requested - Random Quote Generator

**URL:** <https://forum.freecodecamp.org/t/help-requested-random-quote-generator/57488>\
**Category:** General\
**Created:** [November 20, 2016, 10:54pm UTC](https://forum.freecodecamp.org/t/help-requested-random-quote-generator/57488 "2016-11-20T22:54:15Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![adamShaleen](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/adamshaleen/32/159511_2.png) [@adamShaleen](https://forum.freecodecamp.org/u/adamShaleen)\
**Post date:** [November 20, 2016, 10:54pm UTC](https://forum.freecodecamp.org/t/help-requested-random-quote-generator/57488/1 "2016-11-20T22:54:15Z")

</div>

I’ve read quite a few articles and stack-overflow questions and I still cannot get my random quote generator to deal with the ‘insecure request’ error that I’m seeing. The URL I’m using works in an endpoint tester, like Postman. However, when using a web based compiler, like codepen, I get the following error:

> “The page at ‘[https://codepen.io/username/pen/ENxrBL?editors=0010](https://codepen.io/username/pen/ENxrBL?editors=0010)’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘[http://quotesondesign.com/wp-jsonp=?/posts](http://quotesondesign.com/wp-jsonp=?/posts)? filter[orderby]=rand&filter[posts\_per\_page]=1’. This request has been blocked; the content must be served over HTTPS.”

Code:

```
<div class="contentContainer">
  <h1 id="quote">"Random Quote Goes here"</h1>
  <h3 id="quoteAuthor">-Quote author goes here</h3>
  <button id="twitterButton">Twitter Icon</button>
  <button id="generateQuoteButton">New Quote</button>
</div>

------------------------------------------------------------

$(document).ready(function() {
  $("#generateQuoteButton").on("click", function() {
    $.getJSON("http://quotesondesign.com/wp-jsonp=?/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(json) {
      $("#quote").html(JSON.stringify(json.content));
      $("#quoteAuthor").html(JSON.stringify(json.title));
    });
  });
});

```

Open to any and all suggestions, thank you!

---

<div class="post-metadata">

**Author:** ![s\_coder](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/s_coder/32/26587_2.png) [@s\_coder](https://forum.freecodecamp.org/u/s_coder)\
**Post date:** [November 20, 2016, 11:46pm UTC](https://forum.freecodecamp.org/t/help-requested-random-quote-generator/57488/2 "2016-11-20T23:46:14Z")

</div>

> [@adamShaleen](#):
>
> http:

try using “https://…” in your link instead of HTTP

---

<div class="post-metadata">

**Author:** ![adamShaleen](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/adamshaleen/32/159511_2.png) [@adamShaleen](https://forum.freecodecamp.org/u/adamShaleen)\
**Post date:** [November 21, 2016, 1:01am UTC](https://forum.freecodecamp.org/t/help-requested-random-quote-generator/57488/3 "2016-11-21T01:01:27Z")

</div>

I’ve tried using ‘https’ instead and I get a CORS error.

```
cannot load https://quotesondesign.com/wp-jsonp=?/posts?filter[orderby]=rand&filter[posts_per_page]=1. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access. The response had HTTP status code 404.
```

---

<div class="post-metadata">

**Author:** ![adamShaleen](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/adamshaleen/32/159511_2.png) [@adamShaleen](https://forum.freecodecamp.org/u/adamShaleen)\
**Post date:** [November 21, 2016, 2:20am UTC](https://forum.freecodecamp.org/t/help-requested-random-quote-generator/57488/4 "2016-11-21T02:20:38Z")

</div>

I added ‘[https://crossorigin.me](https://crossorigin.me)’ to the beginning of the URL, and switched to what appears to be a more stable endpoint and everything appears to be working, in codepen, at least. I’m doing a separate version in angular 1, just to compare the two back to back.

Updated code:

```
$(document).ready(function() {
  $("#generateQuoteButton").on("click", function() {
    $.getJSON("https://crossorigin.me/https://quotes.stormconsultancy.co.uk/random.json?dataType=%27jsonp%27&type=%27GET%27", function(json) {
      $("#quote").html(JSON.stringify(json.quote));
      $("#quoteAuthor").html(JSON.stringify(json.author));
    });
  });
});
```

---

<div class="post-metadata">

**Author:** ![adamShaleen](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/adamshaleen/32/159511_2.png) [@adamShaleen](https://forum.freecodecamp.org/u/adamShaleen)\
**Post date:** [November 24, 2016, 7:43pm UTC](https://forum.freecodecamp.org/t/help-requested-random-quote-generator/57488/5 "2016-11-24T19:43:56Z")

</div>

Spoke too soon. Adding the ‘[crossorigin.me](http://crossorigin.me)’ was working as expected for several days but it is now throwing an error, and I haven’t changed any code.

```
No 'Access-Control-Allow-Origin' header is present on the requested resource.

```

Can anyone tell me why this works intermittently?

---

<div class="post-metadata">

**Author:** ![s\_coder](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/s_coder/32/26587_2.png) [@s\_coder](https://forum.freecodecamp.org/u/s_coder)\
**Post date:** [November 29, 2016, 6:07pm UTC](https://forum.freecodecamp.org/t/help-requested-random-quote-generator/57488/6 "2016-11-29T18:07:46Z")

</div>

Not sure if you fixed this yet, but i saw someone else post [crossorigin.me](http://crossorigin.me) is down…  
[https://forum.freecodecamp.com/t/show-the-local-weather-openweathermap-warning/60292/4?u=s\_coder](https://forum.freecodecamp.com/t/show-the-local-weather-openweathermap-warning/60292/4?u=s_coder)

---

<div class="post-metadata">

**Author:** ![Joshuaswift](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/joshuaswift/32/26887_2.png) [@Joshuaswift](https://forum.freecodecamp.org/u/Joshuaswift)\
**Post date:** [November 29, 2016, 8:51pm UTC](https://forum.freecodecamp.org/t/help-requested-random-quote-generator/57488/7 "2016-11-29T20:51:05Z")

</div>

[Crossorigin.me](http://Crossorigin.me) seems to go down every few days, it’s probably not the best option to base your project around it!

---

<div class="post-metadata">

**Author:** ![adamShaleen](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/adamshaleen/32/159511_2.png) [@adamShaleen](https://forum.freecodecamp.org/u/adamShaleen)\
**Post date:** [December 7, 2016, 2:14am UTC](https://forum.freecodecamp.org/t/help-requested-random-quote-generator/57488/8 "2016-12-07T02:14:30Z")

</div>

Yeah…I’ve noticed. Do you have another suggestion?

---

<div class="post-metadata">

**Author:** ![Joshuaswift](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/joshuaswift/32/26887_2.png) [@Joshuaswift](https://forum.freecodecamp.org/u/Joshuaswift)\
**Post date:** [December 7, 2016, 4:33am UTC](https://forum.freecodecamp.org/t/help-requested-random-quote-generator/57488/9 "2016-12-07T04:33:08Z")

</div>

I used the Forismatic API ([http://forismatic.com/en/api/](http://forismatic.com/en/api/)) and just used http on codepen instead of https. Had no issues so far.

---

<div class="post-metadata">

**Author:** ![jwilkins.oboe](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jwilkins.oboe/32/179497_2.png) [@jwilkins.oboe](https://forum.freecodecamp.org/u/jwilkins.oboe)\
**Post date:** [January 16, 2021, 6:10am UTC](https://forum.freecodecamp.org/t/help-requested-random-quote-generator/57488/10 "2021-01-16T06:10:19Z")

</div>