feat(cors): Add new option 'cors' for adding HTTP access control (CORS) to assets served by Browsersync

Author: shakyShane

lib/default-config.js

@@ -241,6 +241,14 @@ module.exports = {
      */
     browser: "default",
 
+    /**
+     * Add HTTP access control (CORS) headers to assets served by Browsersync
+     * @property cors
+     * @type boolean
+     * @default false
+     */
+    cors: false,
+
     /**
      * Requires an internet connection - useful for services such as [Typekit](https://typekit.com/)
      * as it allows you to configure domains such as `*.xip.io` in your kit settings

lib/server/utils.js

@@ -48,11 +48,7 @@ var utils = {
     getBaseApp: function (bs, options, scripts) {
 
         var app  = connect();
-
-        /**
-         * Add the proxy Middleware to the end of the stack
-         */
-        app.stack.push(
+        var defaultMiddlewares = [
             {
                 id: "Browsersync IE8 Support",
                 route: "",
@@ -73,7 +69,21 @@ var utils = {
                 route: bs.options.getIn(["scriptPaths", "path"]),
                 handle: scripts
             }
-        );
+        ];
+
+        if (options.get('cors')) {
+            defaultMiddlewares.unshift({
+                id: 'Browsersync CORS support',
+                route: '',
+                handle: utils.getCorsMiddlewware()
+            })
+        }
+
+        /**
+         * Add the proxy Middleware to the end of the stack
+         */
+
+        app.stack.push.apply(app.stack, defaultMiddlewares);
 
         /**
          * Add user-provided middlewares
@@ -118,6 +128,24 @@ var utils = {
             bs.snippetMw.opts.rules.push(rule);
         }
         return bs.snippetMw.middleware;
+    },
+    getCorsMiddlewware: function () {
+
+        return function (req, res, next) {
+            // Website you wish to allow to connect
+            res.setHeader('Access-Control-Allow-Origin', '*');
+
+            // Request methods you wish to allow
+            res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
+
+            // Request headers you wish to allow
+            res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
+
+            // Set to true if you need the website to include cookies in the requests sent
+            // to the API (e.g. in case you use sessions)
+            res.setHeader('Access-Control-Allow-Credentials', true);
+            next();
+        }
     }
 };
 

test/specs/e2e/e2e.options.cors.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var browserSync = require("../../../");
+
+var assert = require("chai").assert;
+var sinon = require("sinon");
+var request     = require("supertest");
+
+describe("e2e options test (cors)", function () {
+    it("Adds cors middleware", function (done) {
+        browserSync.reset();
+        var config = {
+            server: {
+                baseDir: "test/fixtures"
+            },
+            open: false,
+            logLevel: "silent",
+            cors: true
+        };
+        browserSync(config, function (err, bs) {
+            request(bs.server)
+                .get("/index.html")
+                .expect(200)
+                .end(function (err, res) {
+                    assert.equal(res.headers['access-control-allow-origin'], '*');
+                    assert.equal(res.headers['access-control-allow-methods'], 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
+                    assert.equal(res.headers['access-control-allow-headers'], 'X-Requested-With,content-type');
+                    assert.equal(res.headers['access-control-allow-credentials'], 'true');
+                    bs.cleanup();
+                    done();
+                });
+        });
+    });
+});