CORS issues with IE9 and workarounds
CORS(Cross-Origin-Resource-Sharing) is one of the features in HTML5 feature stack that enables a page to make AJAX requests to other domains. This feature is introduced to circumvent the Same-Origin-Policy. I am not discussing about CORS in detail here as there are lots of online resources available.
I am working on a product where html files are served from one domain and back-end requests should be made to another domain (of course sub-domain) for security reasons and API clarity.
Luckily we need to support browsers with HTML5 capabilities like Chrome > 14, Safari > 5.0.5 , Firefox > 9, IE >8. I thought that IE9 is HTML5 complaint and promised to have support for it. I could have investigated a little bit
Application was implemented and we are running for release. Suddenly while going through entire flow we realized that IE9 is not making any CORS requests. From then on our hunt started. Searching blogs, articles, stackoverflow for solutions.
I am here to explain the steps we following to resolve IE9 CORS issues. We need to modify quite a bit on server side also to suport IE9 CORS.
I found an interesting blog about limitations in IE9 CORS and work arounds.
Here is the http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx
IE9 uses a special object called XDomainRequest for making CORS requests and this is used in IE8 and IE9. Fortunately they realized developers problems and started supporting HTML5 CORS spec in IE10. Hope these problems wont happen in IE10 (not tested yet).
JQuery for some reason did not support XDomainRequest as it is not going to live long. Instead plugin was developed and it pretty much the one that fits the situation. You can find the plugin at http://viejs.org/docs/2.0.0alpha1/xdr.html.
We need to modify that js file a bit by adding before or after one of the handlers.
xdr.onprogress = function() { };
Please remember to add it otherwise IE9 will not make any CORS request.
Browser wont send any cookie information for CORS requests hence we should send auth-info as query param and handle it on server side. Even browser wont honor Set-Cookie header in the response of CORS requests and we can handle it by using the same query param logic on the client side. Get the auth-info as query param from the server and set is as cookie on client side.
Browser only supports GET, POST methods for CORS. For this we need to deviate from REST methodology of using PUT, DELETE based on the requirements. Should modify server code to support both PUT, POST for the end-point. We can ditch POST once we stop supporting IE9 in near future.
Browser wont send any custom headers set in the CORS request. For POST methods no other Content-Type is supported other than text/plain. We should modify the server code to handle POST requests without content type.
Hope I explained something that makes sense for those who are struggling with IE9 CORS.
I am working on a product where html files are served from one domain and back-end requests should be made to another domain (of course sub-domain) for security reasons and API clarity.
Luckily we need to support browsers with HTML5 capabilities like Chrome > 14, Safari > 5.0.5 , Firefox > 9, IE >8. I thought that IE9 is HTML5 complaint and promised to have support for it. I could have investigated a little bit
Application was implemented and we are running for release. Suddenly while going through entire flow we realized that IE9 is not making any CORS requests. From then on our hunt started. Searching blogs, articles, stackoverflow for solutions.
I am here to explain the steps we following to resolve IE9 CORS issues. We need to modify quite a bit on server side also to suport IE9 CORS.
I found an interesting blog about limitations in IE9 CORS and work arounds.
Here is the http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx
IE9 uses a special object called XDomainRequest for making CORS requests and this is used in IE8 and IE9. Fortunately they realized developers problems and started supporting HTML5 CORS spec in IE10. Hope these problems wont happen in IE10 (not tested yet).
JQuery for some reason did not support XDomainRequest as it is not going to live long. Instead plugin was developed and it pretty much the one that fits the situation. You can find the plugin at http://viejs.org/docs/2.0.0alpha1/xdr.html.
We need to modify that js file a bit by adding before or after one of the handlers.
xdr.onprogress = function() { };
Please remember to add it otherwise IE9 will not make any CORS request.
Browser wont send any cookie information for CORS requests hence we should send auth-info as query param and handle it on server side. Even browser wont honor Set-Cookie header in the response of CORS requests and we can handle it by using the same query param logic on the client side. Get the auth-info as query param from the server and set is as cookie on client side.
Browser only supports GET, POST methods for CORS. For this we need to deviate from REST methodology of using PUT, DELETE based on the requirements. Should modify server code to support both PUT, POST for the end-point. We can ditch POST once we stop supporting IE9 in near future.
Browser wont send any custom headers set in the CORS request. For POST methods no other Content-Type is supported other than text/plain. We should modify the server code to handle POST requests without content type.
Hope I explained something that makes sense for those who are struggling with IE9 CORS.
Comments
I would love to see a walkthrough!
JavaScript Training in CHennai HTML5 Training in Chennai HTML5 Training in Chennai JQuery Training in Chennai JQuery Training in Chennai JavaScript Training in Chennai JavaScript Training in Chennai
JavaScript Training in CHennai JavaScript Training in CHennai JQuery Online Training JQuery Online Training
HTML5 CSS3 JavaScript Training in Chennai | HTML5 Online Training