Got stuck while doing the "Build a Random Quote Machine" task

Code Feedback
1

Hi,

I’m doing the “Build a Random Quote Machine” task. I use a codepen.io as my editor.

I’m trying to retrieve data from http://quotes.stormconsultancy.co.uk/random.json using jQuery getJSON() method.

But the following error happenes: XMLHttpRequest cannot load http://quotes.stormconsultancy.co.uk/random.json. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://s.codepen.io’ is therefore not allowed access.

Could you help please. Thanks in advance.

1 Like
2

Use this better http://forismatic.com/en/api/
and the query should have jsonp=?

3

@tukhtarov do a quick Google search on something called “CORS”, it will explain your issue and solutions to it. For solution think JsonP…

1 Like
4

After a lot of searching I figured out that I have to find APIs that offer either JsonP or CORS support. Am I thinking in the right way?

5

You’re almost there already, you posted that you are already using jQuery getJSON() so to get around the CORS issue just use getJSON() in JSONP mode. It involves adding a callack function.

1 Like
6

I tried to do this:

$.getJSON( "http://api.forismatic.com/api/1.0/method=getQuote&format=json&key=457653&lang=en&jsonp=?",
function(json) { console.log(json); }
);

And I faced an “Uncaught SyntaxError: Unexpected identifier” error.

7

My query:
http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?

1 Like
8

I see now my mistake. I made format=json when I should make format=jsonp.

9

Great thanks, guys!

I appreciate your help so much!

10

There is also some ninjutsu: https://crossorigin.me/

And I did used exactly that quote source.

https://crossorigin.me/http://quotes.stormconsultancy.co.uk/random.json

11

Hi,

I tried to check my code today. It doesn’t work again.

I see the following in the console:

Mixed Content: The page at ‘https://codepen.io/tukhtarov/pen/jqjbVP?editors=1111’ was loaded over HTTPS, but requested an insecure script ‘http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=jQuery222038259937173673575_1463839667594&_=1463839667595’. This request has been blocked; the content must be served over HTTPS.

12

It appears that the error message in console is telling you that codepen is served as secure https and that forismatic is being served as unsecure http content. Mixed Content is described by MDN.

Try changing your quote server to something served securely like theysaidso.