Freecodecamp: No 'Access-Control-Allow-Origin' header is present on the requested resource
Challenge http://www.freecodecamp.com/challenges/zipline-build-a-random-quote-machine has an issue. User Agent is: Mozilla/5.0 (Windows NT 6.1, WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.85 Safari/537.36. Please describe how to reproduce this issue, and include links to screenshots if possible.
I tried to use the forismatic api, but received the following response. How do I get around this:
XMLHttpRequest cannot load http://api.forismatic.com/api/1.0/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.
willbonds
All 20 comments
Please refer to this wiki entry. Although it's for a different challenge, the problem and solution are the same.
ghost
on 12 Sep 2015
The snippet seems to have been generalized. Is that right? It seems kind of Greek to me, who has no Greek.
On Sat, Sep 12, 2015 at 11:23 AM, Leon Feng [email protected]
wrote:
Please refer to this wiki entry
https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Zipline-Use-the-Twitchtv-JSON-API.
Although it's for a different challenge, the problem and solution are the
same.—
Reply to this email directly or view it on GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/3264#issuecomment-139792585
.
Richard Gay -- Austin, TX
willbonds
on 12 Sep 2015
It's Greek to me as well… But since the Zipline instructions state that we're free to use third-party libraries, I just treat that snippet as such.
If anyone reading this knows a simpler solution, please do share it on the wiki. Thank you!
ghost
on 12 Sep 2015
@benmcmahon100 had some tips for this, I believe you need to use jsonp...
benschenker
on 13 Sep 2015
Right, Ben, I've come to that conclusion.
On Sat, Sep 12, 2015 at 5:17 PM, Ben Schenker [email protected]
wrote:
@benmcmahon100 https://github.com/benmcmahon100 had some tips for this,
I believe you need to use jsonp...—
Reply to this email directly or view it on GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/3264#issuecomment-139824777
.
Richard Gay -- Austin, TX
willbonds
on 13 Sep 2015
JSONP, it is. I am closing this issue since it is resolved, but feel free to reopen if you feel it isn't :)
anrddh
on 13 Sep 2015
@benschenker I'd like to see some tips from you. As much as I appreciate Leon's suggestion, I really don't like plugging in code I don't understand. How can I get a less steep ramp to learning how to use jsonp and using HTTP requests to a url?
willbonds
on 14 Sep 2015
Hey, a late comment on this: I also had troubles using JSONP, both with Wikipedia and Google Places (it says something about MIME type). Don't really remember where but I came across this solution, using a CORS proxy. It worked perfect for me: just prepend http(s)://crossorigin.me/ to the url, so that it becomes: https://crossorigin.me/https://en.wikipedia.org/w/api.php?format=json&action=query
camilodelvasto
on 20 Jan 2016
It seems like this issue is unnecessarily frustrating or hard to track down for a sample project. Yes, there is read-search-ask and such, but is this the type of thing we should be asking campers to understand at this level? I've spent 1 day on building the html, css, and javascript and two weeks googling and trying to get the API to work. The documentation is pretty bad for a beginner and there it's hard to know what to google here. I've run into problems with search terms being returned double-coded with .getJSON and this issue with .ajax, and people are even having to route the API query through a proxy. It just seems absurd to me and isn't helped by the user stories and example project being completely out of date.
Lewis65
on 2 Feb 2016
@Lewis65 Though I somehow agree with you, CORS is a real issue when you are building something for real, so learning how to deal with it really helps. Anyhow, there are free APIs out there that allow you to perform essentially the same operations (json requests, object manipulation, etc) and perhaps FCC could have a list of those that will allow anything on codepen to run without issues. I have found that vimeo, flickr, themoviedb.org and YouTube api work fine there (though that last one doesn't work well on localhost)
camilodelvasto
on 2 Feb 2016
@Lewis65 Agreed! I actually used to be a computer science professor and have spent about 2 weeks sorting through the chaff of Google on this problem! The unrealistic thing about this is that half the "solutions" involve configuring the server you are running on - which we can't do on codepen.io.
The Wikipedia problem has probably taken more time for me than the rest of the course combined. Even the hints on this page don't run as shown!
drdaveg
on 23 Feb 2016
I agree, I think FCC needs to be more direct on the API that should be used for the first example and hold the user's hand a little more. In many cases jsonp is need and nothing was ever mentioned about such. The previous examples aren't that helpful for .getJSON when you most likely end up using the .ajax call.
nathanhannig
on 13 May 2016
I am wondering if it would help to build a custom API for this and publish on https://market.mashape.com/dashboard for all FCC campers to access. I am trying to get one done with node and express but getting stuck at the last steps of my book...
byteknacker
on 21 Jun 2016
I am also having a similar issue:
"No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access."
If I use Postman, my GET request is just fine, but I get that error above on codepen
rajeejones
on 12 Jul 2016
@rajeejones
I came here to complain but then I noticed that I was putting an extra space in the end of the url.
"http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=? "
alpha-oliveira
on 16 Aug 2016
@alpha-oliveira man , thanks for that comment . you saved me. been fighting with the api since. thanks
zealsham
on 17 Aug 2016
Example that could help...not exact url, but pretty close:
```
$.ajax({
url: "https://en.wikipedia.org/w/api.php?action=opensearch&search=random&rnlimit=5&format=json",
dataType: "jsonp",
success: function( data ) {
console.log( data );
}
andymaheshw
on 5 Dec 2016
For those running into this issue, you can use this API instead: https://market.mashape.com/andruxnet/random-famous-quotes
Contrary to the API at forismatic, this one supports CORS.
dienluong
on 28 Dec 2016
@byteknacker man, I did not know about the existence of this site you mentioned, now everything is working. Thanks!
calhiari
on 10 May 2017
Adding the JSON data type solved the issue for me
var data = {
method: "getQuote",
lang: "en" ,
format:"jsonp",
dataType: "jsonp"
};
$("#button").on("click", function(){
// Only change code below this line.
$.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?", data, function(jd) {
$('#quote').html('
The Quote: ' + jd.quoteText + '
');$('#quote').append('
Author of the Quote: ' + jd.quoteAuthor + '
');});
});
rawaaqaffaf
on 29 Oct 2017
Related issues
kokushozero
·
3Comments
imhuyqn
·
3Comments
DaphnisM
·
3Comments
jurijuri
·
3Comments
danielonodje
·
3Comments
Most helpful comment
It seems like this issue is unnecessarily frustrating or hard to track down for a sample project. Yes, there is read-search-ask and such, but is this the type of thing we should be asking campers to understand at this level? I've spent 1 day on building the html, css, and javascript and two weeks googling and trying to get the API to work. The documentation is pretty bad for a beginner and there it's hard to know what to google here. I've run into problems with search terms being returned double-coded with .getJSON and this issue with .ajax, and people are even having to route the API query through a proxy. It just seems absurd to me and isn't helped by the user stories and example project being completely out of date.