Habilitar CORS via BrowserSync

Olá pessoal,

Uma dúvida bastante comum é como habilitar o CORS quando utilizamos o BrowserSync em ambiente de desenvolvimento de Web Apps ou em Hybrid Mobile Apps.

Bom, quando estamos trabalhando com uma API que não possui a implementação de CORS, ao tentarmos fazer um request na API, utilizando Ajax, recebemos o seguinte erro:

No ‘Access-Control-Allow-Origin’ header is present on the requested resource

Esse erro é bastante chato e atrapalha nosso trabalho. Para contornar essa situação, podemos habilitar no BrowserSync uma forma de alterar o Header das nossas request, conforme exemplo abaixo:

module.exports = function(gulp, $) {
   gulp.task('browserSync', function () {
      $.browserSync.init({
         open: 'external',
         host: '0.0.0.0',
         server: {
            baseDir: "/src",
            middleware: function (req, res, next) {
               res.setHeader('Access-Control-Allow-Origin', '*');
               next();
            }
         }
      });
   });
};

Bom, a dica era essa, espero ter ajudado!

Um abraço