CODEWITHSUNDEEP
ajaxjquerycross-domain
bhagirathi
bhagirathi

Reputation: 531

Cross Domain issue(Working in IE not in other browser)

I am fetching data from a URL using an AJAX call. It is giving a json object to me.

When I run the application, the page is working fine in IE with a conformation that the page is accessing information that is not under its control.

This poses a security risk. Do you want to continue?

But that is not working in other browsers like Firefox, Chrome, Safari, etc.

i don't know what is the problem. Please explain to me why it is occurring and how to solve the issue?

My Code:

<!DOCTYPE html>
<html>
<head>
    <title>Search Engine</title>
    <script src="JS/jquery-1.4.2.min.js"></script>
    <script>
    $(document).ready(function () {
        $.support.cors = true;
        // create a script tag element
        var script = document.createElement("script");
        // set the attribute, using the URL to pass data via query parameters
        script.setAttribute("src", "http://192.168.13.111:7090/?uname=bhagirathip&wt=json&fl=*,score");
        script.setAttribute("type", "text/javascript");
        // add the script tag to the document head, forcing an HTTP request
        document.getElementsByTagName("head")[0].appendChild(script);
    });
    function Search() {
        function callbackJsonHandler(data) {
             alert(data);  // This is the JSON data
        }
    }
</script>
</head>
<body>
    <form id="form">
        <div style="text-align: center">
        <input type="search" id="searchInput" autofocus />
        <input type="button" id="btnSearch" onclick="Search()" value="Search" />
    </div>
</form>
</body>
</html>

Upvotes: 1

Views: 2029

Answers (2)

jamesmortensen
jamesmortensen

Reputation: 34038

Another solution to the issue of making cross-domain requests from a browser whose HTML document is served from exampleA.com to a server whose domain is exampleB.com is to use a proxy.

Let's assume that the HTML document you're working with is served from exampleA.com. You own exampleA.com, and you can access the server side and client side code. exampleB.com, on the other hand, is a remote server owned or controlled by someone else. exampleB.com has some data you want to use in exampleA.com.

We know that AJAX won't work, because of the same origin policy, which is in place to protect rogue apps from doing bad things with people's data. However, servers aren't restricted to same domain policy. This means that your app can do the following:

||exampleA.com/test.html|| ---> http req --> ||exampleA.com/getData|| --http req --> ||exampleB.com/getJSON||

Server-side: (As in your server, exampleA.com):

In other words, on your server that you're using to serve the HTML, you write some code that makes an HTTP request from your server to the third-party server:

// JSON URL which should be requested
$json_url = 'http://www.exampleB.com/getJSON';

// Initializing curl
$ch = curl_init( $json_url );

// Configuring curl options
$options = array(
CURLOPT_RETURNTRANSFER => true,
CURLOPT_HTTPHEADER => array('Content-type: application/json') 
);

// Setting curl options
curl_setopt_array( $ch, $options );

// Getting results
$result =  curl_exec($ch); // Getting JSON result string

See Getting JSON Data with PHP Curl for more details. Each server-side platform has the ability to make HTTP connections to servers.

// now, send the data in the response
HttpResponse::status(200);
HttpResponse::setContentType('application/json');
HttpResponse::setData($result);
HttpResponse::send();

See PHP HTTPResponse. Again, whatever language you're working with should have the ability to return data from a string.

Put the above code in a file called "getJSON.php", assuming you're using PHP. Make sure there is no whitespace between the opening <?php and the beginning of the document; otherwise, you will not be able to set the headers. There is likely a better way to send this response, but since your platform isn't specified, I'll leave that as an exercise for the reader.

Client-side code:

    var searchURL = "/getJSON.php"; //From this URL json formatted data is present.
    $.ajax({
        url: searchURL,
        type: 'GET',
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            try {
               alert(data);
            }
            catch (err) {
               alert(err);
            }
        }
    });

Now, in the above JavaScript code, you make a same-domain AJAX request to your server exampleA.com, and then your server makes a request on your behalf to exampleB.com to get the data, then exampleA.com returns the data in the response to the browser.

Upvotes: 0

jamesmortensen
jamesmortensen

Reputation: 34038

You can't make cross-domain AJAX calls across domains. This is a security feature in web browsers to prevent malicious JavaScript code from scraping rendered data in a web page and then shipping it off to some rogue website on some other domain.

By restricting AJAX requests to same domain, browser vendors ensure that JavaScript imported from other sources cannot send data to any server other than the server the HTML page was served from.

In Internet Explorer, it's prompting you, but any smart user who encounters such a message is likely to say no. Presenting your users with such warning messages is not a good design practice and does not inspire confidence in the legitimacy of your application.

The only way that you can send data across domains is to use a browser hack technique called "script tag remoting", which essentially involves using HTML elements that aren't restricted by the same domain policy. For instance script tags can make HTTP GET requests to any server:

// create a script tag element
var script = document.createElement("script");

// set the attribute, using the URL to pass data via query parameters
script.setAttribute("src","http://192.168.9.11/userInput/?key="+userInput);
script.setAttribute("type","text/javascript");

// add the script tag to the document head, forcing an HTTP request
document.getElementsByTagName("head")[0].appendChild(script);

Using this method, you can send data to a remote server. Note that, to get JSON data back, you must wrap it, or pad it, in a JavaScript function and define a callback in the JavaScript code to handle the response:

function callbackJsonHandler(data) {
    alert(data);  // This is the JSON data
}

And your server-side code must return content text/javascript, calling the handler, and passing your JSON as an argument:

callbackJsonHandler({"key":"value","key1":"value2"});

When the browser downloads the JavaScript to the browser, the JavaScript runs immediately, giving you a hook to use to access the JSON in the response.

Since you're using jQuery, you can also check out jQuery JSONP, or JSON with Padding, which can be used to generate a JavaScript response so that you can handle callbacks from these requests to the remote server. Note that the server must be setup to handle JSONP requests for this to work properly, similar to the above setup.

Upvotes: 2

Related Questions