BrowserSync + gulp: Cross domain Cors Issue

Question

I'm working on a project where my workspace is directly in a distant server.

So far i'm loading the browser-sync-client by using my own ip in the src file:

<script type='text/javascript' id="__bs_script__">//<![CDATA[
document.write("<script async src='MYIP:3000/browser-sync/browser-sync-client.1.9.2.js'><\/script>".replace(/HOST/g, location.hostname).replace(/PORT/g, location.port));//]]></script>

But I run into a Cross-Origin Request issue.

Any idea how to configure my gulp ?

  browserSync({files: [constants.CSS_FOLDER+"/**/*.css"]});

Thanks !

Answer 1

I am not sure if I fully understand what you are trying to do, but you can add a middleware in BrowserSync and there you can add any header that you want.

It will look something like this:

browserSync({
    server: {
        baseDir: './build',
        middleware: function (req, res, next) {
            res.setHeader('Access-Control-Allow-Origin', '*');
            next();
        }
    }
});