Ember supporting XDomainRequest(xdr) for CORS

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

有什么帮助或破解吗？

我的请求标题：

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浏览器中的响应标头

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的帮助。

Answer 2

似乎缺少将xhrFields.withCredentials字段设置为true （并非所有CORS请求都需要，IE10仅部分支持）。

请确保您的服务器正在返回Access-Control-Allow-Origin标头，并且该值与您的请求源相匹配。

服务器端CORS实现可能有问题。在jsfiddle上运行httpbin.org的代码的一个经过轻微编辑的实现似乎在Firefox、Chrome和IE11中正常工作：http://jsfiddle.net/n94w774n/.

编辑：

由于Origin和Host都是localhost（只是不同的端口），因此需要检查localhost的安全区域设置两件事：当ajax目标为localhost时，在IE 10和11中拒绝访问