Ember now offering support for XDomainRequest(xdr) to manage CORS restrictions

Question

Ember now offering support for XDomainRequest(xdr) to manage CORS restrictions

I am currently utilizing ember 1.5 with grunt-cli and I would like to make an 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");
        }
    }
});

In IE10/11, everything is working fine. However, in IE8/9, it doesn't work properly as it requires XDR object, leading to the following console output:

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

Any suggestions or workarounds?

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 browsers other than 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

java javascript ajax spring ember.js

Answer 1

Answer №1

Thanks to @Isowen's reply, I was able to find the solution I needed.

To enable XDR for IE8/9, I inserted the following code snippet just before

window.App = Ember.Application.create({});

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

Additionally, based on @Isowen's advice, make sure to include the following while making ajax requests:

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

For those using REST adapters for request handling, you can utilize the below code:

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

When working with backend technologies like Spring - Java, consider including the following CORS filter:

@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");
            response.addHeader("Access-Control-Allow-Credentials", "true");
            if (request.getHeader("Access-Control-Request-Method") != null
                && "OPTIONS".equals(request.getMethod())) {
            
            // Additional CORS configurations for pre-flight requests
            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);
    }
}

A big thank you goes out to @Isowen for the invaluable assistance provided.

Answer 2

Thanks to @Isowen's reply, I was able to find the solution I needed.

To enable XDR for IE8/9, I inserted the following code snippet just before

window.App = Ember.Application.create({});

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

Additionally, based on @Isowen's advice, make sure to include the following while making ajax requests:

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

For those using REST adapters for request handling, you can utilize the below code:

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

When working with backend technologies like Spring - Java, consider including the following CORS filter:

@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");
            response.addHeader("Access-Control-Allow-Credentials", "true");
            if (request.getHeader("Access-Control-Request-Method") != null
                && "OPTIONS".equals(request.getMethod())) {
            
            // Additional CORS configurations for pre-flight requests
            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);
    }
}

A big thank you goes out to @Isowen for the invaluable assistance provided.

Answer 3

Answer №2

~~Make sure to include the xhrFields.withCredentials parameter set to true.~~(Not always necessary for CORS requests, and has limited support in IE10).

Verify that your server is sending the Access-Control-Allow-Origin header with a value matching your request origin.

The issue could be related to the server-side CORS implementation. You can test a modified version of your code on jsfiddle running against httpbin.org to verify it works correctly across different browsers: http://jsfiddle.net/n94w774n/.

~~EDIT:~~

If both the Origin and Host are localhost (but with different ports), you may need to adjust Security Zone settings for localhost. Check out this link for more information: Access denied in IE 10 and 11 when ajax target is localhost

Answer 4

~~Make sure to include the xhrFields.withCredentials parameter set to true.~~(Not always necessary for CORS requests, and has limited support in IE10).

Verify that your server is sending the Access-Control-Allow-Origin header with a value matching your request origin.

The issue could be related to the server-side CORS implementation. You can test a modified version of your code on jsfiddle running against httpbin.org to verify it works correctly across different browsers: http://jsfiddle.net/n94w774n/.

~~EDIT:~~

If both the Origin and Host are localhost (but with different ports), you may need to adjust Security Zone settings for localhost. Check out this link for more information: Access denied in IE 10 and 11 when ajax target is localhost

Ember now offering support for XDomainRequest(xdr) to manage CORS restrictions

Answer №1

Answer №2

Similar questions

The initial value set for the innerHTML property of a div element

Picked (chosen-js): Steps to deselect options using a variety of selectors

Encountering a glitch when utilizing framer-motion's Animated Presence feature

Form with missing input fields submits nothing to the server

Utilizing React to Style Background Positions

Retrieving Database Data using Ajax Cascading DropDownMenus

Create a Java program that causes an ImageView to shake

Leverage closures within Underscore.js templates for enhanced functionality

In TypeScript, the function is failing to retrieve the complete array value

Obtain the rows of selected cells from a nested context menu of JMenuItems in Java Swing

Convert an array of JSON objects into a single JSONObject array

Executing queries in Java that search for MongoDB fields beginning with specific characters

Inkwell shifts bespoke quality

managing various object types in a versatile manner

How do I make the YouTube Grid Gallery player show up in a pop-up window?

Lagging speeds in client-side template rendering using Rivets.js

Is there a way to automatically change the display of an element once the user has closed the menu?

The Ajax request seems to be malfunctioning

Refresh the array using Composition API

When a change is made in the parent component, the local state of the child component in ReactJS is automatically updated