java - Ember 支持 CORS 的 XDomainRequest(xdr)

Question

我正在使用 ember 1.5 使用 grunt-cli 并希望使用 dataType: "JSON" 进行 CORS 支持的 ajax 调用。

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");
        }
    }
});

在 IE10/11 上运行良好。但是在 IE8/9 上，因为它需要 XDR 对象，所以它不起作用并且显示控制台为

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

任何帮助或技巧？

我的请求 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

非 IE 8/9 浏览器中的响应 header

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

我找到了支持@Isowen 回复的答案。

我在window.App = Ember.Application.create({});之前添加了这段代码为 IE8/9

支持 XDR

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();
      }
    }
  };
});

根据@Isowen 的建议，在执行 ajax 请求时

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

使用 REST 适配器处理请求的人可以使用

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);
    }
});

在后端(这里是 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);
    }
}

感谢@Isowen 的帮助。