Cross Domain AJAX Request is not working on IE10

Question

I sent ajax request from 'sub.example.com' to 'www.example.com/api/lists'(yes, it is subdomain), but it's not working only IE. It's working on FF, Chrome, Safari and other mobile browser.

Error Message - SEC7120 : Origin http://sub.example.com is not allowed by Access-Control-Allow-Origin.

My server setting is

<?php
  header('Access-Control-Allow-Origin : *');
  header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');

I tried two ways. first, jQuery.ajax();

$.ajax({
  url : 'http://www.example.com/api/lists',
  type : 'GET',
  dataType : 'JSON',
  cache : false,
  crossDomain : true
}).success(function(data){
  // do something
});

and navtive javascript.

 var xhr = new XMLHttpRequest();
 xhr.open('GET', 'http://www.example.com/api/lists');
 xhr.send();

both of them not working only IE10 Browser.(not tested lt IE10 yet)

Answer 1

Remove the space between the colon and the asterisk.

Change

header('Access-Control-Allow-Origin : *');

to

header('Access-Control-Allow-Origin: *');

Internet Explorer is quite unflexible when it comes to correct syntax.

Answer 2

You may be facing an IE10 issue , and the ticket on JQuery has been closed as this is an issue with IE10 itself.

The 'workaround' at the moment is to set compatibility mode:

<meta http-equiv="x-ua-compatible" content="IE=9" >

It is also worth reading through the post I've linked to.