feat: Add HTTP header configurations to options (#379)

* add custom headers

* Add test check for correct headers

* Add test for custom headers

* Add docs

* Add Auth header test

* Add freeFormObjectKeys for free form config objects

* Merge freeFormObjectKeys instead of reassign

* Update tests for merging and overwriting headers

* Update docs

Author: jooohhn

src/amplitude-client.js

@@ -317,6 +317,9 @@ var _parseConfig = function _parseConfig(options, config) {
     return;
   }
 
+  // Add exception in headers
+  const freeFormObjectKeys = new Set(['headers']);
+
   // validates config value is defined, is the correct type, and some additional value sanity checks
   var parseValidateAndLoad = function parseValidateAndLoad(key) {
     if (!Object.prototype.hasOwnProperty.call(options, key)) {
@@ -342,7 +345,9 @@ var _parseConfig = function _parseConfig(options, config) {
   };
 
   for (var key in config) {
-    if (Object.prototype.hasOwnProperty.call(config, key)) {
+    if (freeFormObjectKeys.has(key)) {
+      options[key] = { ...options[key], ...config[key] };
+    } else if (Object.prototype.hasOwnProperty.call(config, key)) {
       parseValidateAndLoad(key);
     }
   }
@@ -1520,7 +1525,7 @@ AmplitudeClient.prototype.sendEvents = function sendEvents() {
   };
 
   var scope = this;
-  new Request(url, data).send(function (status, response) {
+  new Request(url, data, this.options.headers).send(function (status, response) {
     scope._sending = false;
     try {
       if (status === 200 && response === 'success') {

src/options.js

@@ -39,6 +39,7 @@ import language from './language';
  * @property {string} [unsentKey=`amplitude_unsent`] - localStorage key that stores unsent events.
  * @property {string} [unsentIdentifyKey=`amplitude_unsent_identify`] - localStorage key that stores unsent identifies.
  * @property {number} [uploadBatchSize=`100`] -  The maximum number of events to send to the server per request.
+ * @property {Object} [headers=`{ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }`] - Headers attached to an event(s) upload network request. Custom header properties are merged with this object.
  */
 export default {
   apiEndpoint: 'api.amplitude.com',
@@ -89,4 +90,7 @@ export default {
   unsentKey: 'amplitude_unsent',
   unsentIdentifyKey: 'amplitude_unsent_identify',
   uploadBatchSize: 100,
+  headers: {
+    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+  },
 };

src/xhr.js

@@ -3,11 +3,18 @@ import queryString from 'query-string';
 /*
  * Simple AJAX request object
  */
-var Request = function (url, data) {
+var Request = function (url, data, headers) {
   this.url = url;
   this.data = data || {};
+  this.headers = headers;
 };
 
+function setHeaders(xhr, headers) {
+  for (const header in headers) {
+    xhr.setRequestHeader(header, headers[header]);
+  }
+}
+
 Request.prototype.send = function (callback) {
   var isIE = window.XDomainRequest ? true : false;
   if (isIE) {
@@ -35,7 +42,7 @@ Request.prototype.send = function (callback) {
         callback(xhr.status, xhr.responseText);
       }
     };
-    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
+    setHeaders(xhr, this.headers);
     xhr.send(queryString.stringify(this.data));
   }
   //log('sent request to ' + this.url + ' with data ' + decodeURIComponent(queryString(this.data)));

test/amplitude-client.js

@@ -1482,6 +1482,32 @@ describe('AmplitudeClient', function () {
       assert.equal(server.requests[0].url, 'http://api.amplitude.com');
       assert.equal(server.requests[0].method, 'POST');
       assert.equal(server.requests[0].async, true);
+      assert.equal(
+        server.requests[0].requestHeaders['Content-Type'],
+        'application/x-www-form-urlencoded;charset=utf-8',
+      );
+    });
+
+    it('should send request with merged custom header values', function () {
+      amplitude.init(apiKey, null, {
+        headers: { Authorization: 'Bearer NOT_A_REAL_BEARER_TOKEN' },
+      });
+      amplitude.logEvent('Event Type 1');
+      assert.lengthOf(server.requests, 1);
+      assert.equal(
+        server.requests[0].requestHeaders['Content-Type'],
+        'application/x-www-form-urlencoded;charset=utf-8',
+      );
+      assert.equal(server.requests[0].requestHeaders['Authorization'], 'Bearer NOT_A_REAL_BEARER_TOKEN');
+    });
+
+    it('should send request with overwritten custom header values', function () {
+      amplitude.init(apiKey, null, {
+        headers: { 'Content-Type': 'application/json;charset=utf-8' },
+      });
+      amplitude.logEvent('Event Type 1');
+      assert.lengthOf(server.requests, 1);
+      assert.equal(server.requests[0].requestHeaders['Content-Type'], 'application/json;charset=utf-8');
     });
 
     it('should send https request', function () {