Use XHR + POST for request if CORS supported

Author: benvinegar

src/raven.js

@@ -827,7 +827,7 @@ function send(data) {
     });
 }
 
-function makeRequest(opts) {
+function makeImageRequest(opts) {
     // Tack on sentry_data to auth options, which get urlencoded
     opts.auth.sentry_data = JSON.stringify(opts.data);
 
@@ -843,6 +843,38 @@ function makeRequest(opts) {
     img.src = src;
 }
 
+function makeXhrRequest(opts) {
+    var request = new XMLHttpRequest();
+    request.onreadystatechange = function (e) {
+        if (request.readyState !== 4) {
+            return;
+        }
+
+        if (request.status === 200) {
+            if (opts.onSuccess) {
+                opts.onSuccess();
+            }
+        } else {
+            if (opts.onError) {
+                opts.onError();
+            }
+        }
+    };
+
+    // NOTE: auth is intentionally sent as part of query string (NOT as custom
+    //       HTTP header) so as to avoid preflight CORS requests
+    request.open('POST', opts.url + '?' + urlencode(opts.auth));
+    request.send(JSON.stringify(opts.data));
+}
+
+function makeRequest(opts) {
+    var hasCORS =
+        'withCredentials' in new XMLHttpRequest() ||
+        typeof XDomainRequest !== 'undefined';
+
+    return (hasCORS ? makeXhrRequest : makeImageRequest)(opts);
+}
+
 // Note: this is shitty, but I can't figure out how to get
 // sinon to stub document.createElement without breaking everything
 // so this wrapper is just so I can stub it for tests.

test/raven.test.js

@@ -1267,6 +1267,82 @@ describe('globals', function() {
     });
 
     describe('makeRequest', function() {
+        beforeEach(function() {
+            // use fake xml http request so we can muck w/ its prototype
+            this.xhr = sinon.useFakeXMLHttpRequest();
+            this.sinon.stub(window, 'makeImageRequest');
+            this.sinon.stub(window, 'makeXhrRequest');
+        });
+
+        afterEach(function() {
+            this.xhr.restore();
+        });
+
+        it('should call makeXhrRequest if CORS is supported', function () {
+            XMLHttpRequest.prototype.withCredentials = true;
+
+            makeRequest({
+                url: 'http://localhost/',
+                auth: {a: '1', b: '2'},
+                data: {foo: 'bar'},
+                options: globalOptions
+            });
+
+            assert.isTrue(makeImageRequest.notCalled);
+            assert.isTrue(makeXhrRequest.calledOnce);
+        });
+
+        it('should call makeImageRequest if CORS is NOT supported', function () {
+            delete XMLHttpRequest.prototype.withCredentials;
+
+            var oldXDR = window.XDomainRequest;
+            window.XDomainRequest = undefined;
+
+            makeRequest({
+                url: 'http://localhost/',
+                auth: {a: '1', b: '2'},
+                data: {foo: 'bar'},
+                options: globalOptions
+            });
+
+            assert.isTrue(makeImageRequest.calledOnce);
+            assert.isTrue(makeXhrRequest.notCalled);
+
+            window.XDomainRequest = oldXDR;
+        });
+    });
+
+    describe('makeXhrRequest', function() {
+        beforeEach(function() {
+            // NOTE: can't seem to call useFakeXMLHttpRequest via sandbox; must
+            //       restore manually
+            this.xhr = sinon.useFakeXMLHttpRequest();
+            var requests = this.requests = [];
+
+            this.xhr.onCreate = function (xhr) {
+                requests.push(xhr);
+            };
+        });
+
+        afterEach(function() {
+            this.xhr.restore();
+        });
+
+        it('should create an XMLHttpRequest object with body as JSON payload', function() {
+            makeXhrRequest({
+                url: 'http://localhost/',
+                auth: {a: '1', b: '2'},
+                data: {foo: 'bar'},
+                options: globalOptions
+            });
+
+            var lastXhr = this.requests[this.requests.length - 1];
+            assert.equal(lastXhr.requestBody, '{"foo":"bar"}');
+            assert.equal(lastXhr.url, 'http://localhost/?a=1&b=2');
+        });
+    });
+
+    describe('makeImageRequest', function() {
         var imageCache;
 
         beforeEach(function () {
@@ -1275,7 +1351,7 @@ describe('globals', function() {
         })
 
         it('should load an Image', function() {
-            makeRequest({
+            makeImageRequest({
                 url: 'http://localhost/',
                 auth: {a: '1', b: '2'},
                 data: {foo: 'bar'},
@@ -1289,7 +1365,7 @@ describe('globals', function() {
             globalOptions = {
                 crossOrigin: 'something'
             };
-            makeRequest({
+            makeImageRequest({
                 url: globalServer,
                 auth: {lol: '1'},
                 data: {foo: 'bar'},
@@ -1303,7 +1379,7 @@ describe('globals', function() {
             globalOptions = {
                 crossOrigin: ''
             };
-            makeRequest({
+            makeImageRequest({
                 url: globalServer,
                 auth: {lol: '1'},
                 data: {foo: 'bar'},
@@ -1317,7 +1393,7 @@ describe('globals', function() {
             globalOptions = {
                 crossOrigin: false
             };
-            makeRequest({
+            makeImageRequest({
                 url: globalServer,
                 auth: {lol: '1'},
                 data: {foo: 'bar'},
@@ -1972,11 +2048,11 @@ describe('Raven (public API)', function() {
 
         it('should work as advertised #integration', function() {
             var imageCache = [];
-            this.sinon.stub(window, 'newImage', function(){ var img = {}; imageCache.push(img); return img; });
+            this.sinon.stub(window, 'makeRequest');
 
             setupRaven();
             Raven.captureMessage('lol', {foo: 'bar'});
-            assert.equal(imageCache.length, 1);
+            assert.equal(window.makeRequest.callCount, 1);
             // It'd be hard to assert the actual payload being sent
             // since it includes the generated url, which is going to
             // vary between users running the tests