Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by John Coolidge
John Coolidge
12,614 Points

JSON, JSONP, and the Treehouse API

Hello,

I've built myself a website and I used the Treehouse json file attached to my username in order to display data for anyone looking at my site. It was working a while ago. I checked in on it again and nothing loaded. It said "No 'Access-Control-Allow-Origin' header is present on the requested resource." It was working with the following code: 

$.getJSON("http://teamtreehouse.com/john129er.json", function(treehouse){
    //code here
});

As I was searching for an answer, I stumbled onto information about JSONP. In the Treehouse video on JQuery and JSONP, Dave says to add "?jsoncallback=?" to the query string to let the website know that I'm making a JSONP request to get around making a cross domain AJAX request.

So I added this code to my JSON request:

$.getJSON("http://teamtreehouse.com/john129er.json?callback=?", function(treehouse){
    //code here
});

Well, I did that and I got this error from my website: "Refused to execute script from 'http://teamtreehouse.com/john129er.json?callback=jQuery1110044577419897541404_1445523771333&_=1445523771334' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled."

First, I'm not sure why it worked the first time without any reference to JSONP. Second, I'm not sure why it won't work now that I've used JSONP.

Any suggestions?

EDIT: I realize why it worked with just the JSON request. On my chrome browser, I had an extension that allowed for cross-origin requests to go through. So, perhaps it was never working at all, except on my browser with the extension enabled. Somehow, the extension was disabled (thankfully) and now I can see what everyone else can see. That answers my first question. Any suggestions on how to make this work (my second question)?

Cena Mayo
Cena Mayo
55,236 Points

Hi John,

It looks like Treehouse switched to using https (-see teacher's notes)in their URL on 20 October 2015, so the first thing you'll want to do is change your URLs.

Secondly, make sure that you have CORS enabled on your server. If you're unfamiliar with CORS, this is a good resource.

Best, Cena

John Coolidge
John Coolidge
12,614 Points

Cena,

Wow, thanks! I never would have thought that that would be the issue. I'll remember that as a possibility for future problems like this one. One change and, voila!, perfection again. :)

1 Answer

Paul Ogden
Paul Ogden
7,709 Points
Paul Ogden
Paul Ogden
7,709 Points

Hey John,

You can also format your ajax call like this and it should work:

    $.ajax({
        url: url,
        type: 'GET',
        dataType: 'jsonp',
        data: options,
        success: callback
    })