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;