Ember supporting XDomainRequest(xdr) for CORS

Question

I am using ember 1.5 using grunt-cli and wanted to happen ajax call for CORS support using dataType: "JSON".

Ember.$.ajax({
    type: "GET",
    url: App.serverURL + 'logVisit', // callback for jsonP
    data : {
        'fp': App.fp
    },
    dataType : "JSON",
    success: function(response) {
        console.log('DEBUG: visitor has been registered');
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.log("DEBUG jqXHR.responseText : ",jqXHR.responseText);
        var response = jqXHR.responseText;

        console.log('Failure!');
        if(jqXHR.status&&jqXHR.status==400){
            // alert(jqXHR.responseText);
            var response = $.parseJSON(jqXHR.responseText);

            if (response) {
                console.log(response.error);
            } else {
                // This would mean an invalid response from the server - maybe the site went down or whatever...
                console.log("DEBUG: Inside jqXHR.status : Something went wrong");
            }
        } else {
            console.log("DEBUG: Something went wrong");
        }
    }
});

on IE10/11 its running good. But on IE8/9, as it requires XDR object, its did not work and showing console as

LOG: DEBUG jqXHR.responseText : undefined
LOG: Failure! 
LOG: DEBUG: Something went wrong

Any help or hack?

My Request Header:

Accept:application/json, text/javascript, */*; q=0.01
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Host:localhost:8080
Origin:http://localhost:9000
Referer:http://localhost:9000/
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36

Response headers in non IE 8/9 browsers

Access-Control-Allow-Origin:*
Content-Type:application/json
Date:Wed, 25 Mar 2015 16:01:56 GMT
Server:Apache-Coyote/1.1
Transfer-Encoding:chunked

Answer 1

I found my answer in support of @Isowen's reply.

I have added this piece of code before window.App = Ember.Application.create({}); to support XDR for IE8/9

Ember.$.ajaxTransport( function( options, originalOptions, jqXHR ) {
  var xdr;

  return {
    send: function( _, completeCallback ) {
      xdr = new XDomainRequest();
      xdr.onload = function() {
        if (xdr.contentType.match(/\/json/)) {
          options.dataTypes.push("json");
        }

        completeCallback(200, 'success', { text: xdr.responseText } );
      };
      xdr.onerror = xdr.ontimeout = function() {
        completeCallback(400, 'failed', { text: xdr.responseText } );
      }

      xdr.open(options.type, options.url);
      xdr.send(options.data);
    },
    abort: function() {
      if(xdr) {
        xdr.abort();
      }
    }
  };
});

and as per @Isowen's suggestion, while doing ajax request

Ember.$.ajax({
    type: "GET",
    url: App.serverURL + 'logVisit',
    data : {
        'fp': App.fp
    },
    dataType : "JSON",
    xhrFields: {withCredentials: true}, // line added
    ....
});

People who are handling request with REST adapters can use

App.ApplicationAdapter = DS.RESTAdapter.extend({
    host: App.host,
    namespace : App.namespace,
    ajax: function(url, method, hash) {
        hash = hash || {}; // hash may be undefined
        hash.crossDomain = true;
        hash.xhrFields = { // import line added
            withCredentials: true    // import line added       
        };
        console.log('DEBUG: inside RESTAdapter ajax call');
        return this._super(url, method, hash);
    }
});

and in the backend (here Spring - Java)

@Component("corsFilter")
public class CORSResponseFilter extends OncePerRequestFilter {

    @Override
    protected void doFilterInternal(HttpServletRequest request,
                                    HttpServletResponse response, FilterChain filterChain)
            throws ServletException, IOException {

            response.addHeader("Access-Control-Allow-Origin", "http://YOUR-LINK"); // IMPORT LINE ADDED
            response.addHeader("Access-Control-Allow-Credentials", "true"); // IMPORT LINE ADDED
            if (request.getHeader("Access-Control-Request-Method") != null
                && "OPTIONS".equals(request.getMethod())) {
            // CORS "pre-flight" request
            response.addHeader("Access-Control-Allow-Methods",
                    "GET, POST, PUT, DELETE");
            response.addHeader("Access-Control-Allow-Headers",
                    "X-Requested-With,Origin,Content-Type, Accept");
        }
        filterChain.doFilter(request, response);
    }
}

Thanks @Isowen for your help.

Answer 2

It looks like you are missing setting the xhrFields.withCredentials field to true.(Not required for all CORS requests, and only partially supported in IE10).

Make sure your server is returning the Access-Control-Allow-Origin header, and that the value matches your request origin.

It is likely something is wrong with the server side CORS implementation. A slightly edited implementation of your code on jsfiddle which runs against httpbin.org appears to work correctly in Firefox, Chrome, and IE11: http://jsfiddle.net/n94w774n/.

EDIT:

Since the Origin and Host are both localhost (just different ports), there are two things you need to check the Security Zone settings for localhost: Access denied in IE 10 and 11 when ajax target is localhost