Cross Domain error - i thought i'm using jsonp (?) so what's wrong

Code Feedback
6

The reason it worked is that you are using JSONP, which is quite different from normal JavaScript Ajax calls (JavaScript XMLHttpRequest object).

A brief explanation (somewhat technical):

Even though jQuery uses the $.ajax notation, this is not really an Ajax call. It is JSONP (when the datatype property is set to JSONP).

The way JSONP works is that it dynamically adds a < script > tag into the header of your HTML file.
When your dynamically generated script tag (by jQuery) is executed by your browser, it returns a script from the src url - which contains a call to your callback function (whose name is also generated internally by jQuery if it is an anonymous function).

So the behavior seems asynchronous. BUT this asynchronous behavior is because of the way the browser dynamically loads scripts, and has nothing to do with REST APIs or JavaScript AJAX requests. In fact, JSONP is not even an Ajax request (i.e. XMLHttpRequest).

Limitations of JSONP:

  1. Only GET requests are allowed
  2. JSONP has to be supported by the source server (much like CORS). Fortunately, most websites/server configurations support JSONP (partly because of the limitations of CORS, and partly because it is an older technology compared to CORS)
  3. Because JSONP is not an AJAX request, you cannot make synchronous requests. The Asynchronous behavior is the result of your browser processing the script tag in the HTML page (as explained above)
  4. Security risk: The website/server returns a script. So essentially, you are trusting an external server to send over JavaScript code that could potentially read anything your browser client has access to (for e.g. cookies, other data on your current webpage like usernames, emails, etc. etc.). Hence it is safer to go with reputed sites if you are using JSONP.

Limitations of CORS (because of which we have to use JSONP or a CORS Proxy):

  1. Most websites/servers do not support CORS - even though this is a newer, superior, and safer technology. The reasons are many. CORS depends on certain headers to be present in your GET/POST/etc. request. A lot of corporate firewalls and internal networks strip these headers before the call goes out. So the receiving server never gets these headers - without which CORS requests cannot work.
  2. CORS on the client side: OLD browsers do not have any support for CORS (though there are work-arounds). All newer browsers automatically support CORS.
  3. CORS on the server side: CORS has to be enabled on the server side. If the server that responds to your Api call does not have CORS, there is nothing you can do about it on the client side that will make a CORS request work (workaround: Use a CORS Proxy). When the server does not support CORS, you will get this message: “No ‘Access-Control-Allow-Origin’ header is present on the requested resource”

There are a number of ways to get around the CORS/Ajax Request not working problem:

  1. Use a CORS Proxy: These are proxy servers that funnel the request on your behalf. You can create a proxy server on your local machine (for testing purposes) with NodeJS ( https://www.npmjs.com/package/json-proxy), PHP & Apache Server, Ruby on Rails, etc.
  2. Use publicly available CORS Proxy servers: eg. https://jsonp.afeld.me/, https://crossorigin.me/, http://cors.io/, etc.
  3. Use JSONP :slight_smile:
  4. Using iFrame: this is another solution, but it has all the disadvantages of iFrames - slow performance, clunky, communication between the iFrame and your page, etc.

I did not know any of the above a month ago. While working on the “Random Quotes Machine” project, I did a lot of research into all this (it took me 50 hours to complete that single project :slight_frown:). But I learned a lot in the process. :smiley:

Hope what I have learnt helps you and others.

  • Jay
36 Likes