Problem origin

Browsers prohibit scripts in a page from one domain to request some resources from another domain.

Take a scenario as an example:

A page named 1.html from http://dev.company.com/1.html has a script requesting a resource from another domain by use of url: http://sit.company.com/dosomething. This case is called Cross Domain Request. This is due to the browser’s Same-origin Policy.

This is only limited to Javascript request like AJAX, and not limited to normal resource references:

1. hypertext link by <a href=”…“>

2. image by

3. external css stylesheet link by 

4. external javascript by

5. form action by_ _

6. iframe by

How to resolve this issue

1. JSONP

JSONP, aka JSON with Padding. It actually makes use of the normal external javascript reference. a HTML <script> element specifies for its src attribute a URL that returns JSON.

For example, in the page of url http://localhost:8080/aes-gui/simple/poc/main/sum:

<script type="text/javascript">
function callback_for_response(data) {
// data is the response
}
</script>

<script type="text/javascript" src="http://DEV:8080/aes-gui/simple/poc/main/add?callback=callback_for_response"></script>

When the application on domain sit.company.com has received this request, and found the query parameter “callback”(this is a kind of contract, others also use “jsonp” or anything others), then it generates the response like this:

callback_for_response({a: 1, b: 2, c: "3"})

You see, the response JSON data {a:1, b:2, c:“3”} is surrounded/padded by the passed parameter “callback_for_response”, which is the origin of JSON with Padding.

JSONP has a number of limitations like, it supports only GET requests and not PUT, POST, DELETE, etc and it does not also send headers across.

2. Proxying

Proxying is so simple that the client doesn’t need to know the cross domain requests. It accesses the urls all from the same domain. And the proxy server is responsible for the request to another domain.

In fact, it’s more like a solution of system integration.

3. CORS (Cross Origin Resource Sharing)

CORS is an evolution of JSONP.

CORS stands for Cross Origin Resource Sharing, which allows you to share GET, POST, PUT, and DELETE requests and CORS is supported by the modern browsers.The CORS make use of 2 requests.

Request 1: “OPTIONS” request as part of the handshake to determine if cross domain is allowed by the server.

If server allows the request, it adds a response header - Access-Control-Allow-Origin: ‘*'

Request 2: GET, POST, PUT, or DELETE request that performs the actual operation on the server.