0

My javascript code with jquery is 

$("#quoteid").on("click", function() {
    $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en", function(quotejson) {
        $("#quotegot").html(quotejson["quoteText"]);
   });
});

The ID "quoteid" is linked with a button in the page and the #quotegot is linked with a text box. Whenever I run the code, and press the button, a message in the console is displayed which says that

XMLHttpRequest cannot load http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.

Whatever API I use, I get the same error. What should I do?

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Arun Kumar A
  • 104
  • 1
  • 10
  • It's a CORS issue - you need to get the data server side – Jaromanda X Sep 07 '16 at 14:02
  • 1
    It means that the URL you're calling does not send CORS headers back with the response. If they also don't support JSONP format, then you cannot make a request to that API through JS – Rory McCrossan Sep 07 '16 at 14:02
  • `&format=jsonp` - the callback function name needs to be sent using the query parameter name `jsonp` - see jquery documentation on how to set the callback parameter name – Jaromanda X Sep 07 '16 at 14:06

0 Answers0