I’m struggling with the random quote machine. I’ve gone through the documentation, added the JSONP to the URL, but I am getting the CORS error below and I have no idea how to solve it. I just want to get a quote showing, with the author, in my HTML.
If the server has disallowed CORS (i.e. specified that requests must come from the same domain) then you can’t access that resource with jQuery. But there is a work-around using script tags, which circumvent the CORS restriction. It’s nuts, but it works.
Check out this page for more info:
Note: the callback has to be defined before the script tag runs.
If you take a look at your console, you will see an error on this line:
You are referring to a post object. In your current version you post above, your anonymous function should have a post parameter. Once you do this, put a console.log(post), so you can see that you are getting an array of one object and not an object. You need to reference the array’s first element (which is the object).
There are a couple of ways two get the object you seek to use the rest of your existing code:
#1) You could assign post.shift() back to post
post = post.shift();
#2) You could assign the first element of post back to post
You should know that setting up your own dev server won’t solve the problem on your users’ machines. They’ll have the same CORS problem (cross-origin requests are clearly disabled, that’s why you’re getting the error!).
It creates a script tag that calls the URL and passes the response to the callback function…
However, one problem is, you can’t make JSONP calls to HTTP servers from inside codepen.
The other problem is, the server you’re trying to connect to doesn’t return the right MIME type for JSONP calls (at least, not from that endpoint/URL). You can JSON back, but you need JS back (application/json vs application/javscript). You can’t control this, it’s server-side configuration.
The server owner doesn’t want people using its resources externally. That’s the point of CORS. You can fake it with middle-man servers pretending to be part of the domain serving the resource, but you can’t get between all of your users and the server! This isn’t my area of expertise, but it seems like you’re trying to do something that is explicitly difficult or impossible to do without the agreement of the server owner.
To explain a bit better, you’re running, say ‘kubix.com’, which makes a request to ‘quotesondesign.com’ (QOD.com), but QOD.com doesn’t want anyone but visitors to its own domain getting any responses (i.e. it disables CORS). You set up a local dev server with domain ‘quotesondesign.com’ configured in local DNS and make requests to qod.com, qod.com says’ yeah fine, that’s the right domain’ and you get responses. As soon as you ship your code to a real webserver (e.g. kubix.com), this fails, because CORS.
Ah, sorry rmdawson, after looking at noyb’s code, I re-read the messages above. I’d missed the switch to HTTPS. Damn. Could have saved some time there! I blame working for 12 straight days without a break.
Hopefully the points I raised above still are useful in other contexts, but at this rate, I’m not banking on it. I’m going to get comfy.
Just to clarify, I’m looking to eventually host this project on my portfolio site through GitHub pages once It’s complete (don’t like codepen). A lot of the projects to come involve using API’s, so I suppose my question is how do I complete projects using API’s, and then ensure that they work properly on Github pages for others to view.