Chapter 5, page 162 - console error due to 'same origin' policy
Closed this issue · 9 comments
In trying to obtain the JSON from the Flickr URL provided, the Chrome console shows this error:
XMLHttpRequest cannot load http://api.flickr.com/services/feeds/photos_public.gne?tags=dogs&format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8888' is therefore not allowed access.
The Chrome fix detailed on page 156 ("Overcoming Browser Security Restrictions") only applies to JSON files on the same server. I'm using Mac OS X 10.9 (Mavericks), running the page through MAMP.
Apologies if this is my error and doesn't belong on the Issues tracker.
Hi, thanks for the feedback! This is the correct place for possible errata! Sorry for the problems.
For some reason, I'm not getting that error, but I opened the file as a file in the browser, and not on a MAMP server. The Flickr feed described should support JSONP, and -- therefore -- should be accessible through JQuery's getJSON function.
For example, open up the link directly in your browser:
http://api.flickr.com/services/feeds/photos_public.gne?tags=dogs&format=json
If you can see the JSON object wrapped in a function call (jsonFlickrFeed), it should be accessible via JQuery's getJSON function. Can you try opening the example file as a file (in Chrome File->Open) and see if it works when you bypass MAMP?
Happy to help!
Did you mean opening the index.html file directly instead of accessing through a URL? If so, that resulted in the same error thrown.
Thanks! And, just to be clear, you're opening this file without any modifications:
https://github.com/semmypurewal/LearningWebAppDev/blob/master/Chapter5/Flickr/index.html
I just tried the example in Firefox, Chrome, and Safari, with no startup changes (which means I didn't have to follow the 'overcoming browser security restrictions' instructions) and it works in all three. Interestingly, this example is only a slight modification of a Flickr example right out of the JQuery documentation:
http://api.jquery.com/jquery.getjson/
Actually, it shouldn't even be creating an XMLHttpRequest object, since it should be getting the data via JSONP (which -- I think -- works by script tag injection, not an XMLHttpRequest object) so the error is a little puzzling.
If you've modified the code (meaning your code is different from the example), it might be helpful if you share it in a gist (gist.github.com) and I can take a look.
In fact, it might be helpful if you post your code anyway (even if it looks the same). That way I can try it on my computer to see if I run into the same error. Thanks!
I just turned on my Apache server on my Mac and opened the file through the server. It seems to be working in all three browsers there as well. So maybe it's a problem with your MAMP configuration?
I have a friend who uses MAMP, so I can check with them tomorrow if we're still running into this issue.
OH! I think I found the problem. In the book, note that there is a second line, so it looks like this:
var url = "http://api.flickr.com/services/feeds/photos_public.gne?" +
"tags=dog&format=json&jsoncallback=?";
I added the line break so it would fit on a single page. This isn't the case in the example in the Github repository (it's all on one line).
If you inadvertently leave out the second line (or part of it), I think it will cause the error you're seeing. Specifically, from the error, it looks like you're missing the jsoncallback parameter. Can you double check that? I think that will fix it!
Sorry again for the problems!
Ah, I did indeed miss adding the ending part of the URL with &jsoncallback=?. That's surely enough to break things. I fixed and now the object is being logged in the console as expected.
No worries about the issues, as it was my typo. Thanks for your attention to this!
Thanks for the kind words! Glad we got it all worked out.
Feel free to let me know if you run into any other problems.
This conversation helped a lot, thank you.