A question about cross-domain (subdomain) ajax request

Question

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/.

Answer 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.

Answer 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

Answer 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>

Answer 4

The simplest solution I found was to create a php on your subdomain and include your original function file within it using a full path.

Example:

www.domain.com/ajax/this_is_where_the_php_is_called.php

Subdomain:

sub.domain.com

Create: sub.domain.com/I_need_the_function.php

Inside I_need_the_function.php just use an include:

include_once("/server/path/public_html/ajax/this_is_where_the_php_is_called.php");

Now call sub.domain.com/I_need_the_function.php from your javascript.

var sub="";
switch(window.location.hostname)
{
case "www.domain.com":
sub = "/ajax/this_is_where_the_php_is_called.php";
break;
case "domain.com":
sub = "";
break;
default: ///your subdomain (or add more "case" 's)
sub = "/I_need_the_function.php";
}


xmlHttp.open("GET",sub,true);

The example is as simple as I can make it. You may want to use better formatted paths.

I hope this helps some one. Nothing messy here - and you are calling the original file, so any edits will apply to all functions.

Answer 5

Another workaround, is to direct the ajax request to a php (for example) page on your domain, and in that page make a cURL request to the subdomain.

Answer 6

New idea: if you want cross subdomain (www.domain.com and sub.domain.com) and you are working on apache. things can get a lot easier. if a subdomain actually is a subdirectory in public_html (sub.domain.com = www.domain.com/sub/. so if you have ajax.domain.com/?request=subject...you can do something like this: www.domain.com/ajax/?request=subject

works like a charm for me, and no stupid hacks, proxies or difficult things to do for just a few Ajax requests!

Answer 7

I wrote a solution for cross sub domain and its been working for my applications. I used iframe and setting document.domain="domain.com" on both sides. You can find my solution at :

https://github.com/emphaticsunshine/Cross-sub-domain-solution