Same Origin Policy – AJAX & using Public APIs – Even if we have a good project plan and a logical concept, we will spend the majority of our time correcting errors abaout javascript and ajax. Furthermore, our application can run without obvious errors with JavaScript, we must use various ways to ensure that everything is operating properly. In general, there are two types of errors that you’ll encounter while doing something wrong in code: Syntax Errors and Logic Errors. To make bug fixing easier, every JavaScript error is captured with a full stack trace and the specific line of source code marked. To assist you in resolving the JavaScript error, look at the discuss below to fix problem about Same Origin Policy – AJAX & using Public APIs.
Problem :
I know if on my own webpage, if my user is on :
http://www.example.com/form.php
and I make an ajax request from that page to :
http://example.com/responder.php
It will fail because of the Same origin policy (subdomain is different).
What I am trying to understand is, how is it that AJAX requests can pull data from API’s like flickr when the request and server are obviously different.
Edit :
eg: Why does this code work?
$.getJSON('http://api.flickr.com/services/rest/?&;method=flickr...'
(Referred this Community Wiki)
Is it using Cross Origin Resource Sharing?
Thanks!
Solution :
There are few known methods to work around the Same Origin Policy. One popular technique is to use “Script Tag Injection” such as in JSONP. Since the <script> tag is not constrained by the Same Origin Policy, a script on a third-party domain can provide executable code that interacts with a provided callback function. You may want to check out the “Tips and Tricks” section in the following article for further reading on the topic:
- Howto Dynamically Insert Javascript And CSS (hunlock.com)
You may also be interested in checking out the following Stack Overflow post for further reading on other techniques to work around the Same Origin Policy:
UPDATE: Further the updated question:
Quoting from the jQuery documentation on $.getJSON():
If the URL includes the string “callback=?” in the URL, the request is treated as JSONP instead.