Fix CORS and JSONP on older browsers

Author: joanniclaborde

lib/resource.js

@@ -11,7 +11,7 @@ var extend = require('extend');
 
 var util = require('./util');
 
-// Superagent uses btoa for auth encoding on the client, which is missing from <IE10
+// SuperAgent uses btoa for auth encoding on the client, which is missing from <IE10
 // https://github.com/visionmedia/superagent#supported-browsers
 if (!util.isNode && !window.btoa) window.btoa = require('./base64').encode;
 
@@ -166,18 +166,36 @@ var jsonpRequest = function(method, data, callback) {
   script.src = url;
 
   var timer;
-  var jsonpCallback = _.once(function(data) {
-    document.getElementsByTagName('head')[0].removeChild(script);
-    if (data instanceof Error) return callback(data);
-    if (timer) clearTimeout(timer);
-    processResponse({status: 200}, data, callback);
-  });
+  var first = true;
+
+  window[callbackName] = function(data) {
+    var timedout = data instanceof Error;
+
+    // Cancel timeout
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
 
-  window[callbackName] = jsonpCallback;
+    // Do not cleanup if there was a timeout, in case the real request ever comes back
+    if (!timedout) {
+      document.getElementsByTagName('head')[0].removeChild(script);
+      delete window[callbackName];
+    }
+
+    // Only run user callback once
+    if (first) {
+      first = false;
+      timedout ? callback(data) : processResponse({status: 200}, data, callback);
+    }
+  };
 
   if (self.options.timeout) {
     timer = setTimeout(function() {
-      jsonpCallback(new Error('timeout of ' + self.options.timeout + 'ms exceeded'));
+      timer = null;
+      var err = new Error('timeout of ' + self.options.timeout + 'ms exceeded');
+      err.callbackName = callbackName; // For testing purposes
+      window[callbackName](err);
     }, self.options.timeout);
   }
 
@@ -233,12 +251,20 @@ var superAgentRequest = function(request, callback) {
   // http://visionmedia.github.io/superagent/#buffering-responses
   if (request.buffer) request.buffer();
 
-  request.end(function(err, res) {
-    // Superagent considers statuses <200 and >=300 as errors
-    // http://visionmedia.github.io/superagent/#error-handling
-    if (err) return callback(err, res);
-    processResponse(res, null, callback);
-  });
+  // Not all weird browser errors are catched by SuperAgent
+  try {
+    request.end(function(err, res) {
+      // In case the request is not async, we don't want to catch the callback exceptions
+      setTimeout(function() {
+        // SuperAgent considers statuses <200 and >=300 as errors
+        // http://visionmedia.github.io/superagent/#error-handling
+        if (err) return callback(err, res);
+        processResponse(res, null, callback);
+      }, 0);
+    });
+  } catch (err) {
+    callback(err);
+  }
 }
 
 var processResponse = function(res, data, callback) {

lib/util.js

@@ -1,3 +1,3 @@
 module.exports.isNode = !(typeof window !== 'undefined' && window !== null);
 
-module.exports.supportsCORS = !module.exports.isNode && (('withCredentials' in new XMLHttpRequest()) || (typeof XDomainRequest !== 'undefined'));
+module.exports.supportsCORS = !module.exports.isNode && (typeof XMLHttpRequest !== 'undefined') && ('withCredentials' in new XMLHttpRequest());

test/config.js

@@ -1,5 +1,6 @@
 var fs   = require('fs');
 var zlib = require('zlib');
+var url  = require('url');
 
 module.exports.port = 8081;
 module.exports.host = 'http://localhost:' + module.exports.port;
@@ -18,20 +19,22 @@ module.exports.routes = function (req, res) {
   }
 
   var success = function(data) {
-    data || (data = {url: req.url});
+    data || (data = {url: req.url.replace(/solidus_client_jsonp_callback_\d+/, 'solidus_client_jsonp_callback')});
     res.writeHead(200, {'Content-Type': 'application/json'});
-    if (req.url.indexOf('solidus_client_jsonp_callback_100000') == -1) {
-      res.end(JSON.stringify(data));
+    var callback = url.parse(req.url, true).query.callback;
+    if (callback) {
+      res.end(callback + '(' + JSON.stringify(data) + ');');
     } else {
-      res.end('solidus_client_jsonp_callback_100000(' + JSON.stringify(data) + ');');
+      res.end(JSON.stringify(data));
     }
   };
+
   var not_found = function() {
     res.writeHead(404, {'Content-Type': 'application/json'});
     res.end(JSON.stringify({error: 'Not Found: ' + req.url}));
   };
 
-  switch (req.method + ' ' + req.url) {
+  switch ((req.method + ' ' + req.url).replace(/solidus_client_jsonp_callback_\d+/, 'solidus_client_jsonp_callback')) {
   case 'GET /page':
   case 'GET /page?a=':
   case 'GET /page?a=1':
@@ -42,10 +45,10 @@ module.exports.routes = function (req, res) {
   case 'GET /page?a=1&b=2&c%5B0%5D=3&c%5B1%5D=4&d=%7B%22e%22%3A5%2C%22f%22%3A%5B6%2C7%5D%7D':
   case 'GET /api/resource.json?url=http%3A%2F%2Fsolidus.com%3Fa%3D1':
   case 'GET /custom/route/resource.json?url=http%3A%2F%2Fsolidus.com':
-  case 'GET /page?a=1&b=2&callback=solidus_client_jsonp_callback_100000':
-  case 'GET /with-post-object?a=1&b=2&callback=solidus_client_jsonp_callback_100000&id=1&type=object':
-  case 'GET /with-post-string?a=1&b=2&callback=solidus_client_jsonp_callback_100000&id=1&type=string':
-  case 'GET /with-post-empty?a=1&b=2&callback=solidus_client_jsonp_callback_100000':
+  case 'GET /page?a=1&b=2&callback=solidus_client_jsonp_callback':
+  case 'GET /with-post-object?a=1&b=2&callback=solidus_client_jsonp_callback&id=1&type=object':
+  case 'GET /with-post-string?a=1&b=2&callback=solidus_client_jsonp_callback&id=1&type=string':
+  case 'GET /with-post-empty?a=1&b=2&callback=solidus_client_jsonp_callback':
     success();
     break;
 
@@ -74,7 +77,7 @@ module.exports.routes = function (req, res) {
 
   case 'GET /with-delay':
   case 'GET /api/resource.json?url=http%3A%2F%2Fsolidus.com%2Fwith-delay':
-  case 'GET /with-delay?callback=solidus_client_jsonp_callback_100000':
+  case 'GET /with-delay?callback=solidus_client_jsonp_callback':
     setTimeout(success, 100);
     break;
 

test/tests/resource.js

@@ -7,16 +7,6 @@ var host = require('../config').host;
 module.exports = function() {
 
 describe('Resource', function() {
-  var random = Math.random;
-
-  before(function() {
-    Math.random = function() {return 1};
-  })
-
-  after(function() {
-    Math.random = random;
-  });
-
   describe('.constructor', function() {
     it('initializes url, dynamic and options', function(done) {
       var resource = new Resource('http://solidus.com/page');
@@ -313,7 +303,7 @@ describe('Resource', function() {
         if (util.isNode || util.supportsCORS) {
           assert.deepEqual(res.data, {url: '/page?a=1&b=2'});
         } else {
-          assert.deepEqual(res.data, {url: '/page?a=1&b=2&callback=solidus_client_jsonp_callback_100000'});
+          assert.deepEqual(res.data, {url: '/page?a=1&b=2&callback=solidus_client_jsonp_callback'});
         }
         done();
       });
@@ -369,19 +359,46 @@ describe('Resource', function() {
 
       describe('with jsonp', function() {
         it('with successful response', function(done) {
-          var resource = new Resource({url: 'http://localhost:8081/page?a=1', query: {b: 2}, jsonp: true});
+          var resource = new Resource({url: host + '/page?a=1', query: {b: 2}, jsonp: true});
           resource.get(function(err, res) {
             assert.equal(err, null);
-            assert.deepEqual(res.data, {url: '/page?a=1&b=2&callback=solidus_client_jsonp_callback_100000'});
+            assert.deepEqual(res.data, {url: '/page?a=1&b=2&callback=solidus_client_jsonp_callback'});
             done();
           });
         });
 
         it('with timeout', function(done) {
-          var resource = new Resource({url: 'http://localhost:8081/with-delay', jsonp: true, timeout: 1});
+          var called;
+          var resource = new Resource({url: host + '/with-delay', jsonp: true, timeout: 1});
           resource.get(function(err, res) {
             assert.equal(err.message, 'timeout of 1ms exceeded');
-            assert(!res.data)
+            assert(!res.data);
+            assert(!called);
+            called = true;
+
+            // Highjack the jsonp callback, to end the test when the real request come back
+            var oldCallback = window[err.callbackName];
+            window[err.callbackName] = function(data) {
+              assert.deepEqual(data, {url: '/with-delay?callback=solidus_client_jsonp_callback'});
+              oldCallback(data);
+              assert(!window[err.callbackName]);
+              done();
+            }
+          });
+        });
+
+        it('with connection error', function(done) {
+          // If this test fails, maybe you have something running on port 8888?
+          var called;
+          var resource = new Resource({url: 'http://localhost:8888', jsonp: true, timeout: 1});
+          resource.get(function(err, res) {
+            assert.equal(err.message, 'timeout of 1ms exceeded');
+            assert(!res.data);
+            assert(!called);
+            called = true;
+
+            // The real request will never come back
+            window[err.callbackName]({});
             done();
           });
         });
@@ -434,7 +451,7 @@ describe('Resource', function() {
           var resource = new Resource({url: host + '/with-post-object?a=1', query: {b: 2}, jsonp: true});
           resource.post({id: 1, type: 'object'}, function(err, res) {
             assert.equal(err, null);
-            assert.deepEqual(res.data, {url: '/with-post-object?a=1&b=2&callback=solidus_client_jsonp_callback_100000&id=1&type=object'});
+            assert.deepEqual(res.data, {url: '/with-post-object?a=1&b=2&callback=solidus_client_jsonp_callback&id=1&type=object'});
             done();
           });
         });
@@ -443,7 +460,7 @@ describe('Resource', function() {
           var resource = new Resource({url: host + '/with-post-string?a=1', query: {b: 2}, jsonp: true});
           resource.post('id=1&type=string', function(err, res) {
             assert.equal(err, null);
-            assert.deepEqual(res.data, {url: '/with-post-string?a=1&b=2&callback=solidus_client_jsonp_callback_100000&id=1&type=string'});
+            assert.deepEqual(res.data, {url: '/with-post-string?a=1&b=2&callback=solidus_client_jsonp_callback&id=1&type=string'});
             done();
           });
         });
@@ -452,7 +469,7 @@ describe('Resource', function() {
           var resource = new Resource({url: host + '/with-post-empty?a=1', query: {b: 2}, jsonp: true});
           resource.post(null, function(err, res) {
             assert.equal(err, null);
-            assert.deepEqual(res.data, {url: '/with-post-empty?a=1&b=2&callback=solidus_client_jsonp_callback_100000'});
+            assert.deepEqual(res.data, {url: '/with-post-empty?a=1&b=2&callback=solidus_client_jsonp_callback'});
             done();
           });
         });