Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Erro "Cannot GET" com gulp e browser-sync

Algum tempo atrás criei um gulpfile utilizando o gulp 4, para atualizar algumas das tasks que já tinha desenvolvido e assim tentar utilizar novos recursos do gulp.

Esse arquivo foi utilizado no treinamento de js avançado I e II, para eu não ter que ficar atualizando sempre a página. O problema surgiu quando comecei a utilizar a rotina junto com o express. Configurei o proxy, mas a partir daí passei a ter uns erros que nunca tinha visto até então:

  • quando tento importar as negociações no index.html obtenho o erro: "HttpService.js:36 GET http://localhost:3001/negociacoes/semana 404 (Not Found)"
  • ao tentar acessar essa url obtendo os seguintes erros: "Failed to load resource: the server responded with a status of 404 (Not Found)" ; "Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-ThhI8UaSFEbbl6cISiZpnJ4Z44uNSq2tPKgyRTD3LyU='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback."

Esses erros acima ocorrem quando tento acessar com o chrome (v 80.0.3987.163 ). Quando acesso com o firefox a url "localhost:3001/negociacoes/semana" obtenho o erro:

  • Content Security Policy: As configurações da página bloquearam o carregamento de um recurso em inline (“default-src”).

Minhas dúvidas:

  • O problema é com o gulp ou com o servidor?
  • O que teria que modificar na configuração do servidor para rodar normalmente o projeto - caso o problema seja com o servidor.
  • Se o problema for no gulp o que eu deveria modificar no gulpfile.

Observações:

  • ao carregar um arquivo que não é gerada dinamicamente não obtenho o erro citado. O .json do projeto é gerado dinamicamente, então resolvi criar uma pasta que continha um arquivo .json. Ao acessar "http://localhost:3001/dias/dados.json" não obtenho o erro

Versões utilizadas:

  • node: 12.16.2
  • gulp: 4.0.2
  • browser-sync: 2.26.7
var gulp = require('gulp'),
    //sassCompiler = require('gulp-sass'),
    //sourcemaps = require('gulp-sourcemaps'),
    //autoprefixer = require('gulp-autoprefixer'),
    browserSync = require('browser-sync').create();

var sassLint = require('gulp-sass-lint'),
    cssLint = require('gulp-csslint');

var paths = {
  baseDirServer:'./',
  proxyEnd:'http://localhost:3000/',
  project:'./**/*',
  html: './**/*.html',
  js:'./js/**/*.js',
  sass:{
    src: './scss/**/*.scss'
  },
  css: {
    src: './css/**/*.css',
    dest: './css/'
  }

};


function compileSassToCss(){
   return gulp.src(paths.sass.src)
    .pipe(sassLint())
    .pipe(sassLint.format())
    .pipe(sassLint.failOnError())
    .pipe(sourcemaps.init())
      .pipe(sassCompiler({outputStyle: 'expanded'})
      .on('error', sassCompiler.logError))
      .pipe(autoprefixer())
    .pipe(sourcemaps.write('maps')) // cria e salva o arquivo de mapeamento, na pasta maps
    .pipe(gulp.dest(paths.css.dest))
    .pipe(browserSync.stream()) // atualiza estilo sem recarregar página
}


function lintCSS(){ 
  return gulp.src(paths.css.src)
    .pipe(cssLint())
    .pipe(cssLint.formatter())
    .pipe(browserSync.stream()) 
}


function watch(){

  browserSync.init({

    server: {
        proxy:{
          target: paths.proxyEnd,
          ws: true,
        }

    }
  });


   gulp.watch(paths.html).on('change', browserSync.reload);
   gulp.watch(paths.js).on('change', browserSync.reload);

}


exports.compileScssToCss = compileSassToCss;
exports.watch = watch;
1 resposta
solução!

Fala ai Bernardo, tudo bem? Precisa ver o projeto com mais calma para analisar e saber onde pode estar o problema.

Caso seja um projeto server side, ou seja, o próprio Express renderiza as telas, acho que poderia utilizar outros cursos ao contrário do Gulp, por exemplo o Nodemon:

https://nodemon.io/

Ele vai ser o responsável por atualizar seu servidor assim que detectar alguma mudança nos arquivos que foram configurados para serem observados.

O Gulp geralmente é mais usado para aplicações client side, ou seja, que não possuem um servidor por trás.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software