The code for the Random Quote Machine works in the browser but not in CodePen. Did some research into JSON/AJAX issues with Codepen and tried (1st) changing the http to https, then (2nd) prepending https://crossorigin.me to the url (which is the current code in my Pen) and finally (3rd) installing the Chrome extension “Allow-Control-Allow-Origin”. Nothing has worked (unless its a combination of the 3 I have not tried?). (Also tried changing $.ajax to $.getJSON). Any help appreciated.
If you don’t add JQuery to your project ajax calls will not happen…
Anyway JSONP is set up correctly, you don’t neet crossorigin.me . The forismatic API responds to http only. You should access codepen using http, or the browser will block the request due to “mixed active content”.
This should work
$.ajax({
url: "http://api.forismatic.com/api/1.0/?",
dataType: "jsonp",
data: "method=getQuote&format=jsonp&lang=en&jsonp=?",
success: ...
})```Thanks EM-Ant.
Added jQuery to Codepen javascript settings and set the url’s back to using http but still does not work?
Appreciate the help.
you have to point your browser to codepen using http, or if you use https the browser will block all not-secure requests which contain active data (json is considered active, images are not). Go to http://codepen.io/kimh/pen/Lbwxdr?editors=1010 This will work.
@kimbah try using cors anywhere herokuapp… It woked for me.
@lleander if you guys keep using duct-tape solutions, you will never understand what is the problem, why it happens, and how to fix it.
Here there are 2 different issues
- CORS
- using an http API from an https page
if you use a proxy, of course it will work, but IMHO you don’t learn how to fix things by yourself.
1 Like
@Em-Ant I understand what you are trying to say but please tell me exactly how I can pass through the CORS + http codepen + https codepen access using the forismatic api? I am just a newbie here trying to make my project work first before going into the deeper layers of ajax. Making it work is very difficult enough and finding the real solution is even harder. I hope people here understand why newbies like me resort to band-aid solutions first before looking for the real solution. Thanks!
By the way, I am also still looking for the real solution to this kinds of issues that is why I am refactoring my codes from time to time. Yes I agree that temporary workaround is not a solution to a problem but I think it helps in finding a solution because at the very least I know that I was able to display the json data on the page so I know that part of my code works. Next step shoukd be finding the solution to cors + http + https access.
Using the insecure version of a site to solve CORS issues is the duct-tape solution. Using a CORS proxy or switching services is the correct fix.
@PortableStick I solved this issues on my project writing a proxy myself. Bu I knew how to do it because I know about CORS and jsonp, and “mixed active content”. If they keep using crossorigin.me random without knowing what they do, they will never understand the nature of the problem
The same can be said for those who bypass the issue by using the insecure version of the site. I’m not saying they shouldn’t learn, but it’s not reasonable to expect students to write their own proxy in the front-end curriculum. None of this changes the fact that using a CORS proxy or changing services is the correct solution.
Thanks appreciate that suggestion
I totally agree (but only if you know what you are doing 
)
Anyway I hope this discussion will help people to understand the nature of these issues.
Thank you and happy new Year 
.
Thanks Em-Aut. I’m still a bit lost. Bear with me it you will.
What do you mean “point your browser to codepen using http”? I can see your link is http and mine is https - how do I change this.
I researched a bit (this is really beyond my newbie level) and what I found was Redirect from HTTPS to HTTP by adding a rewrite rule to your .htaccess file? I thought this related to apache servers and remote/local hosting. I’m confused.
If you have any useful links would appreciate that.
Thanks again.
Sorry lleander you lost me. Do I install CORS Anywhere (npm) on my local machine or is this something thats setup on the Heroku platform (which is a cloud application hosting service as I understand).
There are newbies and then there a newbies.
Your first solution was (almost) correctly configured to use jsonp. Jsonp is a way that old servers use to deal with cross origin requests. That fixes the cors part.
If you want to use that setup you have to access your project using http in the project url, because there is another issue: the forismatic api uses http, and a secure page (accessed through https in the url) doesn’t allow “active” resources (like json data) to be downloaded from insecure servers.
If you want to keep getting your codepen project through https you have to use a proxy that uses https itself (or use another https quotes API). crossorigin.me seems to not work with forismatic (the api responds with an error).
https://cors-anywhere.herokuapp.com/ is another CORS proxy. It seems to be working. In this case it works because it uses https. If you use this proxy you don’t need the jsonp related stuff in your code, because the proxy server will add the required CORS headers for you.
this should work:
$.ajax({
url: "https://cors-anywhere.herokuapp.com/http://api.forismatic.com/api/1.0/?",
dataType: "json",
data: "method=getQuote&format=json&lang=en",
success:...
})```
I hope this comment is clear enough. Sorry if I appeared a little rude (I'm not a native english speaker), but my intention was to let you understand the very nature of the problem, before telling you how to make your app work without knowing what the issue is about.
2 Likes
Thanks Em-Ant. I appreciate the clarification.
Still a little lost (I tried adding url: "https://cors-anywhere.herokuapp.com/http://api.forismatic.com/api/1.0/?" to my original Codepen and still does not work).
https://codepen.io/kimh/pen/Lbwxdr
Maybe I need to investigate how to get codepen through http rather than https.
Again thanks mate.
look at the code in the reply above.
You have to remove the stuff related to jsonp, because using the cors proxy you are addressing the cross origin issue in a different way.
So : in the query url (data: …) set format=json and remove the jsonp=? part. in the ajax settings object dataType: "json"
$.ajax({ url: "https://cors-anywhere.herokuapp.com/http://api.forismatic.com/api/1.0/?", dataType: "json", data: "method=getQuote&format=json&lang=en", success:... })
getting codepen through http is quite easy : just use http://codepen.io/kimh/pen/Lbwxdr?editors=1010 instead of https://... but probably this isn’t the best solution (as pointed out before)
4 Likes
Thanks Em-Ant finally got it - was’nt looking at the data method closely enough.
Really appreciate your persistence in getting me through this.
Thank you for explaining this so clearly! This was the same issue I was hung up on.
Major Kudos to you!
1 Like
Thank you sooo much for your explanation, I was searching and always found crossorigin.me and couldn’t figure out why I can’t get it to work!
1 Like