Add CORS option

[thasmo]

When using the proxy option and loading browser-sync manually via inline script tag it would be nice to have the possibility to check if the server on port 3000 is running, like this:

var url = '//' + location.hostname + ':3000/browser-sync-client.js',
    xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        document.write(('<script async="async" src="' + url + '"><\/script>'));
    }
};

xhr.open('HEAD', url, true);
xhr.send();

The problem is that sending the head request is not allowed, because the browser treats the request to the server on port 3000 as a cross-domain request. It would be nice to have an option to configure CORS headers for the browser-sync server.

[vml-sdaniel]

Why don't you point the browser to the proxy server on port :3000? Then you don't even need CORS. Also, there's the --disable-web-security flag for Chrome, to disable CORS restrictions.

An open CORS support would be good for BrowserSync, tho.

[thasmo]

@vml-sdaniel, I'm trying to look for a way to use the proxy-server without explicitly defining the proxied hostname. There's a related issue #234 I opened also regarding this concern. Maybe there's even a better solution? When using the proxy I have to define the hostname - and that's what I actually don't want to or at least want to avoid.

[shakyShane]

@thasmo if you could provide information about what is actually needed to achieve this I'd be happy to look into it.

[thasmo]

Basically it would be nice to have a simple implementation of CORS into the server of browser-sync. In it's simplest form, the server returns a Access-Control-Allow-Origin with the value *. A more comprehensive how-to can be found here; although I don't know if that's up to date regarding the spec. I'm no expert on this either. Maybe @vml-sdaniel can give some good input on what's important and what use-cases for browser-sync could benefit.

[shakyShane]

This can added easily as middleware, please see http://stackoverflow.com/questions/17124600/how-can-i-add-cors-headers-to-a-static-connect-server

[zach-adams]

For those like me who are using Nginx as the local web server, you can add this block into your Nginx configuration and that will allow CORS support (Also read the comment above the configuration):

https://gist.github.com/Stanback/7145487

[TeodorKolev]

No working solution by far. I don't know why this issue is closed....

[bclinkinbeard]

@TeodorKolev you need to add this to your BS config:

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

[shakyShane]

@bclinkinbeard @TeodorKolev also, since 2.16.0 this is supported via the cors option.

const bs = require('browser-sync').create();

bs.init({
    server: './app',
    cors: true
});

[scipper]

@shakyShane: updating browserSync from 2.9 to 2.17 totally did it. thanks!

[titusfx]

Is not cors:true working? (on version 2.18.8 ) because it doesn't work for me:

browserSync.init({
        serveStatic: ['.'],
        server: './src/mainApp',
        cors: true,      
    });

And I know is only CORS problem, because I have a shortcut to open Chrome with --disable-web-security --user-data-dir="D:/Chrome" and it possible to make request.

[ptsimplot]

@titusfx Same issue here. Did you find a fix? Also tried the middleware solution offered by @bclinkinbeard but no dice. You'd think embedding a youtube link and viewing on localhost would be simple...

[av09]

@shakyShane Unable to fix my CORS by enabling cors:true in my Browser sync config Please help.

[blachawk]

why does the following middleware process not work in browser-sync 2.26.14....

function bSync(cb) {
    msync.init({
        server: {
            baseDir: "./pub",
            middleware: function (req, res, next) {
                res.setHeader('Access-Control-Allow-Origin', '*');
                res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
                next();
            },
        }
    });
}

...when I run my web project in the browser, developer tools is still complaining.....

Access to font at 'http://.../JTURjIg1_i6t8kCHKm45_dJE3gnD-Px3rCs.woff' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[ryanaltvater]

Neither cors or middleware solutions are working for me, using v2.28.3.