Freecodecamp: CORS Error on Random Quote Project

[Dustin-Chase]

I got stuck while trying to do the "Random Quote" web development challenge:

1) Based on past exercises, I assumed that we should use an API to request the random quote.
2) I used a Google search to find a quote API (http://quotesondesign.com/api-v4-0/)
3) I used the sample code on their page for getting a random quote. It did not work (the page displayed nothing).
3a) From past web development knowledge (not gained on Code Camp), I pushed F12 to view the console in the Chrome browser. I could see a CORS error logged there. There isn't coverage of the Chrome browser tools in Code Camp so I don't know how another beginning student would know to look there.
3b) I don't really know what a CORS error is and I have no idea how to resolve it. I read the API's documentation but it isn't that good and just confused me more.
3c) So I could move on, I just made an array of dummy quotes and randomly selected one each time the 'new quote' button is pushed.
4) I posted the question on the Facebook page for my Code Camp group. User akras14 chimed in and helped me figure out what is going on.

Resolution:
I feel that the issue of JSON and CORS is not covered enough by the point you are asked to do the Intermediate Projects. My suggestions would be to move those items up in the curriculum, or perhaps provide a sidebar explaining those issues. Alternatively, a specific API could be cited where the student wouldn't run into cross origin issues.

[akras14]

+1 I think suggesting a list of API to chose from is beneficial, or at least mentioning something about potential CORS errors vs JSONP etc, with a link to some place where coders can learn more about it would be helpful.

[yashdeeph709]

Or We can also switch cors on our servers that will also clear those cors errors.

[ghost]

@yashdeeph709 more issues that aren't trivial to debug could arise when you give the user complete freedom to chose the source API. A few examples: the API is broken and returns no parsable data, the API has a hidden rate limit and answers with 403 or similar, the user's IP is blacklisted.

I think that recommending one or two reliable APIs would be beneficial.

[dtweedle]

WikiQuotes has a reliable API and you can return parsable HTML. It does require the users to scrape the text from returned html though and it also has the CORS problem requiring the JSONP workaround. One advantage it does have is being really well documented.

[lynxlynxlynx]

I've hit this too, but managed to work around it without hassle until the wikipedia challenge. I think I'll end up using http://www.whateverorigin.org/ as even with a manual xhr request chromium is complaining that codepen.io is not setting the required header.

[crashuniverse]

Allow-Control-Allow-Origin: * is a useful extension for chrome. It can remove CORS restrictions for active tab in your browser. Use it for development only and not everyday browsing. Check it out at https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en