Backend Services with CORS for IE8/9

[Daniel]

Hi,

I am posting this as a general question and in the hope it may clear up the problems using CORS and help others with similar issues.

I have been working on an app which primarily uses the REST API for CRUD operations but also with a few Javascript SDK methods for ease.

May be worth noting that the JS SDK is basically the REST API under the hood.

I will use my login as an example for this question as it is the first place my app fails in IE8/9, it was also using the JS SDK method but IE8/9 will not even entertain the request and just throws the good old 'Access Denied' error.

So, since CORS is just an Ajax call I have change my login to using the REST method so that I can really try to troubleshoot things.

I am also using a Jquery helper plugin for CORS, this also has a test which works fine in IE8/9. The difference is that this is only using a simple header (contentType: "text/plain; charset=utf-8"), and the Backend requires a complex header (contentType: "application/json; charset=utf-8") as this is the type of data it needs to parse. This complex header requires a Preflight check (handshake) with the remote server which sends a response back before the actual request is sent and processed.

Everything works great in Chrome/Safari/Firefox & IE10+, the Preflight comes back fine (OPTIONS Ok) and the request is also fine. If you look at the attached screenshots you can see the response in Chrome and the other in IE9. You will see that Cross Origin is fine in both browser dev tools only IE9 has a bad request (400).

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://nb-dev.worldsecuresystems.com

The only difference is I cannot see the Preflight check happen in IE dev tools, I only see the actual request response. I am presuming that the check response is good in IE or I would not get a response at all (as per the attached screenshot).

Here is my Ajax login authentication

var user = {
            "username": $scope.details.username,
            "password": $scope.details.password,
            "grant_type": "password"
        };

        $.ajax({
            url: 'https://api.everlive.com/v1/*api-key*/oauth/token',
            data: JSON.stringify(user),
            contentType: "application/json; charset=utf-8",
            type: 'POST',
            dataType: 'json',
            success: function(data) {
                alert(JSON.stringify(data));
            },
            error: function(jqXHR, textStatus) {
                alert(textStatus);
            }
        });

So why is IE9 showing the response as a bad request?
My concerns are that this is only the 'Read' part of many CRUD operations going on in the app.

Any help would be greatly appreciated.

Thanks,
Daniel

[Yosif]

Hi,

Indeed, your observations are correct. I am afraid that it's not mentioned in the documentation that the Everlive JS SDK supports IE from version 10 onwards.

I've reviewed the external library you're using and would suggest that you add the contentType here:

https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest/blob/master/jQuery.XDomainRequest.js#L44

// Set the Content Type in the XDomainRequest object before we send the request.
xdr.contentType = headers.contentType || 'application/json; charset=utf-8';

The content type seems like supported in XDR from this article:
http://www.xul.fr/ajax/xdomainrequest.php

Can you please try this out and let me know if this works on your side? 


Regards,
Yosif
Telerik

 

 

[Daniel]

Hi Yosif,

Thanks for the response.

I have tried your approach but without any success. The request and response headers remain the same in the IE console. 
One thing that I have noticed is that the contentType seems to be ignored in the request header, from what I have read IE ignores the content type if it is anything other that text/plain, not sure if this is absolutely correct though as there are many debates on this subject!

I have also tried many different ajax configurations, also other plugins but with no luck also.

Please find a very simple test with just one ajax call, also using the plugin implementation that you suggested.

I realise that this may be falling slightly out of the scope of support but I appreciate any help.

Regards,
Daniel

[Yosif]

Hi,

Thanks for your effort to put this sample together. We've been able to play-around with the sample you've pointed and we reproduced the problem. We've been testing by setting the contentType property of the XDR, but as it seems it's read-only: https://msdn.microsoft.com/en-us/library/ie/cc288107(v=vs.85).aspx

Unfortunately, after we researched this topic more extensively we couldn't find any solution. According to this thread in StackOverflow:

http://stackoverflow.com/questions/2657180/setting-headers-in-xdomainrequest-or-activexobjectmicrosoft-xmlhttp

and this comprehensive and complete blog post:

http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx

you can't set the content-type header of the XDR object. That's pretty unfortunate. JSONP won't work in this case either.

Sorry for the inconvenience.

Let me know if you have further questions.

Regards,
Yosif
Telerik

 

 

[Daniel]

Hi Yosif,

Thanks again for your response, and yes you are correct.
The more I read the more apparent it became that there is certainly a limitation in using a POST request with CORS & JSON.

It is unfortunate, always worth a try but we have to move with the times!

Thanks again,
Daniel