Help Requested - Random Quote Generator

1

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’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘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!

2

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

3

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.
4

I added ‘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));
    });
  });
});
1 Like
5

Spoke too soon. Adding the ‘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?

6

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

7

Crossorigin.me seems to go down every few days, it’s probably not the best option to base your project around it!

8

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

9

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

1 Like