Security error using CORS in IE10 with Node and Express

Question

I'm constructing a Backbone application hosted on http://example.com which utilizes an API hosted on https://api.example.com. For the API, I'm using Node.js with the Express.js framework. My CORS solution seems to work in every major browser except IE (it even fails in IE10).

When a request is initiated from IE10, the request never hits the API server. As far as I can tell, the request is not even being sent. When I inspect the request using IE10's developer tools, both the request headers and response headers are blank. When a request is sent from any other browser, the request is received and a response is properly generated.

This is the error I see in the console:

SCRIPT 7002: XMLHttpRequest: Network Error 0x4c7, The operation was canceled by the user.

The request uses jQuery:

$.ajax({
  url: apiRoot + "/endpoint",
  success: function(response) {
    // Omitted irrelevant code
  }
});

According to this article, CORS is disabled in IE by default and must be enabled:

Internet Explorer ignores Access-Control-Allow headers and by default prohibits cross-origin access for Internet Zone. To enable CORS go to Tools->Internet Options->Security tab, click on “Custom Level” button. Find the Miscellaneous -> Access data sources across domains setting and select “Enable” option.

Sure enough, when I enable this setting, the request goes through and everything works as it should. However, I've read that this setting is not actually related to CORS and shouldn't affect it. When using this tool to test for CORS compatibility, IE10 passes regardless of whether this setting is enabled or disabled, which leads me to believe CORS is enabled and I'm just doing something wrong.

Also, everything seems to work as it should when I run Fiddler, since Fiddler is acting as a proxy.

For reference, here's the CORS-related code on the server side:

res.header("Access-Control-Allow-Origin", "example.com");
res.header("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE, OPTIONS");
res.header("Access-Control-Allow-Headers", "Content-Type, Authorization, X-File-Name, X-File-Size, X-File-Type");
res.header("Access-Control-Allow-Credentials", true);
if (req.method == "OPTIONS") {
 res.send(200);
}

Answer 1

Try sending the request to the API server using HTTP instead of HTTPS. The issue sounds like it may have to do with the server's SSL settings more so than the request itself. If this is the case try using SSL settings to something like this.

var options = {
  key:    fs.readFileSync(key),
  cert:   fs.readFileSync(certificate),
  ca:     fs.readFileSync(CA),
  requestCert:        false,
};

https.createServer(options, app).listen(443);

Answer 2

I had the same problem, finally to make things easier I did a nginx proxy_pass directive So I made http://example.com/api point to http://api.example.com
Then in the javascript code will request to example.com/api and the browser will not complain.

I know that this is not ideal, but not all browser support CORS in the same way, especially IE. When you want to give support all the browsers the proxy_pass option is the simplest way.

In other case you'll be making changes to make things work in IE and breaking other browsers support. Not saying that it's impossible, but it will take more testing.

Answer 3

To get my CORS request to work in IE, I had to make my call like this:

$.ajax({
  url: apiRoot + "/endpoint",
  xhrFields: {
     withCredentials: true
  },
  crossDomain: true,
  success: function(response) {
    // Omitted irrelevant code
  }
});