A question about cross-domain (subdomain) ajax request

Let's say I have the main page loaded from http://www.example.com/index.html. On that page there is js code that makes an ajax request to http://n1.example.com//echo?message=hello. When the response is received a div on the main page is updated with the response body.

Will that work on all popular browsers?

Edit:

The obvious solution is to put a proxy in front of www.example.com and n1.example.com and set it so that every request going to a subresource of http://www.example.com/n1 gets proxied to http://n1.example.com/.

Solution 1:

Cross domain is entirely a different subject. But cross sub-domain is relatively easy. All you need to do is to set the document.domain to be same in both the parent page and the iframe page.

document.domain = "yourdomain.com"

More info here

Note: this technique will only let you interact with iframes from parents of your domain. It does not alter the Origin sent by XMLHttpRequest.

Solution 2:

All modern browsers support CORS and henceforth we should leverage this addition.

It works on simple handshaking technique were the 2 domains communicating trust each other by way of HTTP headers sent/received. This was long awaited as same origin policy was necessary to avoid XSS and other malicious attempts.

To initiate a cross-origin request, a browser sends the request with an Origin HTTP header. The value of this header is the site that served the page. For example, suppose a page on http://www.example-social-network.com attempts to access a user's data in online-personal-calendar.com. If the user's browser implements CORS, the following request header would be sent:

Origin: http://www.example-social-network.com

If online-personal-calendar.com allows the request, it sends an Access-Control-Allow-Origin header in its response. The value of the header indicates what origin sites are allowed. For example, a response to the previous request would contain the following:

Access-Control-Allow-Origin: http://www.example-social-network.com

If the server does not allow the cross-origin request, the browser will deliver an error to example-social-network.com page instead of the online-personal-calendar.com response.

To allow access to all pages, a server can send the following response header:

Access-Control-Allow-Origin: *

However, this might not be appropriate for situations in which security is a concern.

Very well explained here in below wiki page. http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Solution 3:

Another solution that may or may not work for you is to dynamically insert/remove script tags in your DOM that point to the target domain. This will work if the target returns json and supports a callback.

Function to handle the result:

<script type="text/javascript">
  function foo(result) {
    alert( result );
  }
</script>

Instead of doing an AJAX request you would dynamically insert something like this:

<script type="text/javascript" src="http://n1.example.com/echo?callback=foo"></script>

A question about cross-domain (subdomain) ajax request

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts