Can somebody help me understand crossdomain asynchronous JS requests stuff and how to debug it?

Question

I'm trying to make a cross-domain asynchronous GET request via jQuery's ajax and I'm getting a lot of trouble understanding what's going on and web browsers error messages.

First, here is the CoffeeScript code:

$(document).on('submit', '.myform', (e) ->
    try
        foo = 'val'                
        settings =
            data: { foo: foo }
            type: 'GET'
            dataType: 'json'
            success: (data, textStatus, jqXHR) ->
                console.log data if debug?
                console.log textStatus if debug?
            error: (jqXHR, textStatus, errorThrown) ->
                console.warn textStatus if debug?
                console.warn errorThrown if debug?

        $.ajax('http://anotherserver.tld/api', settings)
    catch error
        console.error error
    finally
        return false
)

I understood that json is a valid data type only if you set up a cross domain file on the host serving the JavaScript. Here is the one I used (let's call the server my_server.tld):

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
    <!-- Read this: https://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html -->

    <!-- Most restrictive policy: -->
    <!-- <site-control permitted-cross-domain-policies="none"/> -->

    <!-- Least restrictive policy: -->
    <site-control permitted-cross-domain-policies="all"/>
    <allow-access-from domain="*" to-ports="*" secure="false"/>
    <allow-http-request-headers-from domain="*" headers="*" secure="false"/>
</cross-domain-policy>

(this is from HTML5 Boilerplate)

When I try this code, I get the following error:

[Error] XMLHttpRequest cannot load http://anotherserver.tld/api?foo=val. Origin http://my_server.tld is not allowed by Access-Control-Allow-Origin.

This is confusing to me. Is it something missing or a buggy configuration on my_server or anotherserver? Are crossdomain.xml files relevant for this kind of issues?

Cause, even if I don't have access to anotherserver.tld, I tried this code using my_other_server and I could totally see the request in my_other_server access logs.

Thanks for your help.

(for the record, I also tried switching to jsonp but then I get a parse error on something that looks like perfectly fine JSON data... some hair was lost)

Update: this is the crossdomain.xml file from anotherserver.tld:

<cross-domain-policy>
<site-control permitted-cross-domain-policies="master-only"/>
<allow-access-from domain="*"/>
<allow-http-request-headers-from domain="*" headers="*"/>
</cross-domain-policy>

http://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work — rocky, Oct 05 '15 at 17:00
Your *server* that you are sending the request to needs to support CORS (`Access-Control-Allow-Origin`) or JSONP (which is *not* JSON). For CORS to work, your server needs to set the `Access-Control-Allow-Origin` header. For JSONP, your server needs to output a JavaScript file. JSONP is formatted like so: `callback({your:data})`. — Rocket Hazmat, Oct 05 '15 at 17:00
google that error...there's even a whole site dedicated to it — charlietfl, Oct 05 '15 at 17:05
ok...but it's not evident in the question since all resources found should have indicated that it is a server related issue and there is nothing you can do to force it — charlietfl, Oct 05 '15 at 17:24
@rocky so if I understand correctly, in my context, anotherserver.tld should send a response with `Access-Control-Allow-Origin` set to `my_server`? So what's the use for crossdomain.xml files in this context? Are they useless? — Dirty Henry, Oct 05 '15 at 17:25
(I meant 'Are they irrelevant in this context?' more than 'are they useless?') :) — Dirty Henry, Oct 05 '15 at 17:30
Yes, `anotherserver.tld` must server an `Access-Control-Allow-Origin: my_server` (or `*`) response header to allow a script running from `my_server` to access `anotherserver.tld` resources. For `crossdomain.xml`, see [What is crossdomain.xml file?](http://stackoverflow.com/questions/4174317/what-is-crossdomain-xml-file) -- it's used by Adobe products like Flash. It is not used by browsers. — apsillers, Oct 05 '15 at 17:35
Thanks @apsillers. From Adobe's doc: "A cross-domain policy file is an XML document that grants a web client—such as Adobe Flash Player, Adobe Reader, etc.—permission to handle data across multiple domains." Browsers could totally use this :) — Dirty Henry, Oct 05 '15 at 18:19

score 0 · Accepted Answer · edited Oct 12 '15 at 17:04

Your jquery code is fine. You will need to check with the owner of the ajax-server if it allows cross domain requests.

It is impossible to make ajax requests to cross domain servers unless they have been configured to do so.

Read more about it here : https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Concretley here, anotherserver.tld should include an Access-Control-Allow-Origin: my_server (or *) header in its response.

Can somebody help me understand crossdomain asynchronous JS requests stuff and how to debug it?

1 Answers1