I've been having trouble trying to issue a CORS request via the XDomainRequest object in IE8. For my code, I need to send a POST request with some data to a server which then passes that data along through several other services. I've gotten the server to respond to and process requests and data coming from all other browsers, both by using jQuery's ajax method and by using vanilla javascript and the XMLHttpRequest object. However, after reading Mozilla's CORS documentation, Microsoft's XDomainRequest documentation, and quite a few blog posts and stack overflow questions about the latter, I can't seem to get the XDomainRequests to work. Here is the code for the XDomainRequest I'm trying to make:
Creating the request:
if (typeof XDomainRequest != "undefined") {
// XDomainRequest for IE8 & 9.
xhr = new XDomainRequest();
console.log('Generated XDomainRequest');
xhr.onprogress = function() {console.log('Progress');};
xhr.ontimeout = function() {console.log('ontimeout');};
xhr.onerror = function() {console.log('Error');};
xhr.onload = function() {console.log('Success');};
xhr.open(method, url);
console.log('Open XDomainRequest');
}
And then sending the request (which is done in another function):
if (typeof XDomainRequest != 'undefined') {
console.log('XDomainRequest');
setTimeout(function () {
console.log('Sending request');
data = 'foo=bar&baz=bat';
xhr.send(data);
}, 0);
}
I'm aware that the request can not be sent across different protocols, and I can confirm that the request is being made from HTTPS to HTTPs. However, when running the code, I receive an error generated by the XDomainRequest's error handler. When testing a GET request from a Windows XP IE8 virtual machine on virtual box, I also get an error generated by the request's error handler, but unfortunately, no indication of what failed. I know that XDomainRequest is only able to send data if the content type is of 'text/plain' and that is the type of data I have been testing it with. The relevant server code is here:
For an OPTIONS request:
var http = require('http');
var url = require('url');
var request = require('request');
var AWS = require('aws-sdk');
var path = require('path');
var fs = require('fs');
function checkOrigin(request) {
/* Function to determine if origin is greenlit for CORS
* @param request is the http request being made to the server.
* @return returns whether origin matches parent domain.
*/
var acceptableDomain = new RegExp("some_url.com");
if (acceptableDomain.test(request.headers.origin)) {
return request.headers.origin;
} else {
return null;
}
}
.
. // Unrelated code between these functions //
.
if (request.method === 'OPTIONS') {
console.log('!OPTIONS');
var headers = {};
headers["Access-Control-Allow-Origin"] = checkOrigin(request);
headers["Access-Control-Allow-Methods"] = "POST, OPTIONS";
headers["Access-Control-Allow-Credentials"] = true;
headers["Access-Control-Max-Age"] = '86400'; // 24 hours
headers["Vary"] = 'Origin';
headers["Access-Control-Allow-Headers"] = "X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept";
response.writeHead(200, headers);
response.end();
}
For a GET request:
if (request.method === 'GET') {
console.log("Request received!");
var fileType = {
"html": "text/html",
"jpeg": "image/jpeg",
"jpg": "image/jpeg",
"png": "image/png",
"js": "application/javascript",
"css": "text/css"};
var fileName = "some_script.js";
var filePath = path.join(process.cwd(), fileName);
var ext = fileType[fileName.split(".")[1]];
var fileStream = fs.createReadStream(filePath);
console.log(ext);
response.writeHead(200, {'content-type':ext});
fileStream.pipe(response);
//Maybe need return here?
}
For a POST request:
if (request.method == 'POST'
&& (contenttype != undefined)
&& ((contenttype.indexOf('application/json') != -1)
|| (contenttype.indexOf('application/x-www-form-urlencoded') != -1)
|| (contenttype.indexOf('text/plain')!= -1))) {
var message = '';
var body = "";
console.log("Post received!");
if((contenttype.indexOf('application/json') != -1)
|| contenttype.indexOf('application/x-www-form-urlencoded') != -1) {
// Once the request posts data, we begin parsing that data and add it to 'body.'
request.on('data', function (chunk) {
var parsedChunk = JSON.parse(chunk);
body += parsedChunk;
});
request.on('end', function () {
console.log('Data:' + body.replace(/,/g, '\n'));
});
} else {
message = 'POST Received';
response.write(message);
}
response.writeHead(200, {'content-length': message.length,
'Access-Control-Allow-Origin': checkOrigin(request),
'Access-Control-Allow-Headers': "X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept",
'Access-Control-Allow-Methods': "POST, OPTIONS",
'Access-Control-Allow-Credentials': 'true',
'Access-Control-Max-Age': '86400',
'Vary':'Origin',
'content-type': 'text/plain'});
//response.write('POST Received');
response.end();
Does anyone have any ideas as to what might be going wrong when making the XDomainRequest? Let me know if there's any other information I can include that might help!