I apologize if this question has already been answered.

I am trying to retrieve data from a REST web service that exposes a JSON interface using jQuery .ajax call.

When I call the service using the URL, the jQuery call fails although I get a HTTP status code 200 OK.

When I copy the response into a file on the filesystem and retrieve this, the same call works.

Both the file I am accessing and the web service I am calling are on the same machine.

Some notes on the url used in the code below:

Using:

url: "http://localhost:9090/app/user/861", 

the call fails, goes into .fail on all browsers.

The URL itself returns the json on all browsers:

{
    "userid": 861,
    "employeeno": "123",
    "jobdesc": "Developer",
    "firstname": "Jasper",
    "lastname": "Fitussi"
}

when using "test.json" in the local filesystem following is the behavior:

url: "ajax/test.json",    

On Firefox, the call executes, goes into .done and displays the result on page.

On Chrome, the call fails with status 404 and the following message -

"No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access."

I tried different binations changing dataType:"jsonp", adding a ?callback=? to the end of the URL, and enclosing the data in the test.json with a '(' and a ')' without luck.

Please understand I am new to UI programming, javascript and jQuery.

Please help with what I am doing wrong. Here's the javascript:

<script src=".10.2.js" type="text/javascript">
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url:"ajax/test.json",    
            // the following mented call fails, goes into .fail
            // url:"http://localhost:9090/app/user/861", 
            contentType: "application/json",
            accepts: "application/json",
            dataType: "json"
        })
        .done(function(data) {
            alert("Success");
            console.log(data);
            var items = [];
            $.each( data, function( key, val ) {
                items.push( "<li id='" + key + "'>" + val + "</li>");
            });
            $( "<ul/>", {
                "class": "my-new-list",
                html: items.join( "" )
            }).appendTo( "body" );
        })
        .fail(function(data) {
            console.log(data);
            alert("Failed");
            })
        .always(function() {
            alert("In Always");
        });
    });
</script>

The following is the output when I paste the url into the browser (also the contents of ajax/test.json):

{
    "userid": 861,
    "employeeno": "123",
    "jobdesc": "Developer",
    "firstname": "Jasper",
    "lastname": "Fitussi"
}

I apologize if this question has already been answered.

I am trying to retrieve data from a REST web service that exposes a JSON interface using jQuery .ajax call.

When I call the service using the URL, the jQuery call fails although I get a HTTP status code 200 OK.

When I copy the response into a file on the filesystem and retrieve this, the same call works.

Both the file I am accessing and the web service I am calling are on the same machine.

Some notes on the url used in the code below:

Using:

url: "http://localhost:9090/app/user/861", 

the call fails, goes into .fail on all browsers.

The URL itself returns the json on all browsers:

{
    "userid": 861,
    "employeeno": "123",
    "jobdesc": "Developer",
    "firstname": "Jasper",
    "lastname": "Fitussi"
}

when using "test.json" in the local filesystem following is the behavior:

url: "ajax/test.json",    

On Firefox, the call executes, goes into .done and displays the result on page.

On Chrome, the call fails with status 404 and the following message -

"No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access."

I tried different binations changing dataType:"jsonp", adding a ?callback=? to the end of the URL, and enclosing the data in the test.json with a '(' and a ')' without luck.

Please understand I am new to UI programming, javascript and jQuery.

Please help with what I am doing wrong. Here's the javascript:

<script src="http://code.jquery./jquery-1.10.2.js" type="text/javascript">
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url:"ajax/test.json",    
            // the following mented call fails, goes into .fail
            // url:"http://localhost:9090/app/user/861", 
            contentType: "application/json",
            accepts: "application/json",
            dataType: "json"
        })
        .done(function(data) {
            alert("Success");
            console.log(data);
            var items = [];
            $.each( data, function( key, val ) {
                items.push( "<li id='" + key + "'>" + val + "</li>");
            });
            $( "<ul/>", {
                "class": "my-new-list",
                html: items.join( "" )
            }).appendTo( "body" );
        })
        .fail(function(data) {
            console.log(data);
            alert("Failed");
            })
        .always(function() {
            alert("In Always");
        });
    });
</script>

The following is the output when I paste the url into the browser (also the contents of ajax/test.json):

{
    "userid": 861,
    "employeeno": "123",
    "jobdesc": "Developer",
    "firstname": "Jasper",
    "lastname": "Fitussi"
}

• javascript
• ajax
• json
• jquery

• I think you'll find you have a strange url somewhere. Almost every modern browser enforces restrictions on ajaxing from other origins (url domains) than the site is currently hosted at. Try changing your url to "/test.json", I think that has a better chance of working. Otherwise examine your urls carefully. – Lawrence Jones Commented Dec 30, 2013 at 20:32
• 1 Also, make sure you are making the request from a served page, something that starts with http:// and not something that starts with file:// – Eli White Commented Dec 30, 2013 at 20:35
• I tried moving the file into a folder, as well as tried using a served page from tomcat running on localhost, but the behavior is the same as described above. My goal is to retrieve data from the served page - this does not work from any browser. So is localhost not the same domain? – user3147335 Commented Dec 30, 2013 at 20:51
• Is localhost the same domain for the ajax request and the document it originates from? – Anthony Commented Dec 30, 2013 at 21:01
• Please clearly quote the number of issues you are facing, seems like you have specified 404 as well as 200 with failure! – Narayana Nagireddi Commented Dec 30, 2013 at 23:24

5 Answers 5

Your problem is not about UI programming, it's about the security model of modern browsers :p

Access-Control-Allow-Origin errors occurs when you call a webservice (ie: load a JSON file) from a domain that is different from the one hosting your HTML page. In your case, you are opening the html file from your hard drive (file:///) and calling a webservice on localhost.

This is a security feature in all modern browsers that forbid getting data from a foreign webservice without the webservice owners authorizing you (or everyone, wildcards are allowed) to call it.

I remend reading the following guide from MDN, so that you understand WHY you are having this problem. It will then be easy to resolve

https://developer.mozilla/en/docs/HTTP/Access_control_CORS

If you control the source code of the webservice, or the webserver hosting it, you need to add Access-Control-Allow-Origin HTTP headers.

Do you make your ajax call using Apache on wamp, lamp, xampp or mamp or not? I think you work directly using some files lets say on your desktop and not from the www file of wamp. If the browser sends a correct url then the backend responds great, your frontend code seems fine so i think chrome plains about your not using localhost. Am i right? Whats your local development setup?

If it's a local file on the client-side, use file:/// to prefix the URL:

url: 'file:///ajax/test.json'

The third / in file:/// indicates:

As a special case, can be the string "localhost" or the empty string; this is interpreted as `the machine from which the URL is being interpreted'. 3.10

Reference here

Download a tool called fiddler, from http://fiddler2./ great way to debug web requests and to see why they are failing. This will help you narrow down the issue you are experiencing and we can help you further because currently its all guess work.

I had the same issue, all worked fine in I.E and FireFox, a had one ajax call to a rest service using jsonp and it worked fine in chrome, however when I tried to load a file using jsonp I got the cross domain error. In short i had to add "file:" to my file path in the url

    $.ajax({
    type : 'GET',
    url : 'file:jsondata/rain_acc_data.json',
    dataType : 'jsonp',
    jsonpCallback : "jsoncallback",
    success : function(data) {
        aler('ok');
    },
    error : function(jqXHR, status) {
        alert("Failed to load list" + status + jqXHR);
    }
});

this worked for me, make sure to wrap your json in the file with jsoncallback("your jason here");