Question

jQuery:

$.ajax({
url : url,
type : 'GET',
dataType: 'json',
data: {
    'FN'    : 'GetPages',
    'PIN'   : '7659' 
},
xhrFields: {
   withCredentials: true
},
crossDomain: true,
success: function(data) {
    alert('succsess');
    console.log('data', data);
},
error: function (xhr, ajaxOptions, thrownError) {
    alert('error');
    console.log(xhr.status);
    console.log(thrownError);
}
});

Firebug Firefox Network

What happens

The AJAX “error:” event gets triggered and my console.log outputs are:

xhr.status -> 0

thrownError -> (empty String)

Is this normal? When I type the URL in a browser I receive a file download with the JSON content in it, this shouldn’t be a problem right?

Answer 1

Thanks to @CrimsonChin I know its a Same Origin Policy problem

In computing, the same origin policy is an important security concept
for a number of browser-side programming languages, such as
JavaScript. The policy permits scripts running on pages originating
from the same site to access each other’s methods and properties with
no specific restrictions, but prevents access to most methods and
properties across pages on different sites.[1]

(from http://en.wikipedia.org/wiki/Same_origin_policy)

Granting JavaScript clients basic access to your resources simply requires adding one HTTP response header, namely:

Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: http://foo.example.com

(from http://enable-cors.org/)

Ofc, turning the JSON response into a JSONP response would also work. Thx @djakapm